中咨工程建设监理公司网站,福州cms模板建站,成都建设银行网站,linux wordpress 域名浮动的相关属性
以下使浮动的常用属性值#xff1a;
float#xff1a; 设置浮动
以下属性#xff1a;
left : 设置左浮动
right : 设置右浮动
none #xff1a;不浮动#xff0c;默认值clear 清除浮动 清除前面兄弟元素浮动元素的响应
以下属性#xff1a;
left …浮动的相关属性
以下使浮动的常用属性值
float 设置浮动
以下属性
left : 设置左浮动
right : 设置右浮动
none 不浮动默认值clear 清除浮动 清除前面兄弟元素浮动元素的响应
以下属性
left 清除前面左浮动的影响
right 清除前面右浮动的影响
both 清除前面左右浮动的影响元素浮动之后的特点 在上面我们知道了对于浮动的元素其会脱离标准文档流。 浮动产生的影响
脱离文档流。不管浮动前是什么元素浮动后默认宽与高都是被内容撑开尽可能小而且可以设置宽高。不会独占一行可以与其他元素共用一行。不会margin 合并也不会margin 塌陷能够完美的设置四个方向的margin 和padding 。不会像行内块一样被当做文本处理没有行内块的空白问题。
6.当元素浮动之后下面的元素就可以向上提升位置占有浮动元素的位置。
解决浮动产生的影响
浮动产生的一些困扰
对兄弟元素的影响 后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面对前面的兄弟无影响。对父元素的影响 不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依然束缚浮动的元素。
其实最主要要解决的影响是父元素高度塌陷以下是解决方案
方案一 给父元素指定高度。方案二 给父元素设置浮动带来其他影响。方案三 给父元素设置 overflow:hidden 。方案四 在所有浮动元素的最后面添加一个块级元素并给该块级元素设置clear:both
额外标签谁需要清除浮动就在该元素后面添加一个空白标签属性设置为clear:both 方案五 给浮动元素的父元素设置伪元素通过伪元素清除浮动 推荐使用 伪元素 对于其父元素我们可以给其加上一个类并对该类进行如下设置
.clearfix::after {/* 设置添加子元素的内容是空 */content: ;/* 设置添加子元素为块级元素 */display: block;/* 设置添加的子元素的高度0 */height: 0;/* 设置添加子元素看不见 */visibility: hidden;/* 设置clearboth */clear: both;
}
作业
盒子模型
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px auto;padding:0px;/* 自动减去边距宽度 */box-sizing: border-box;}/* 整体 */#all{width: 970px;height: 586px;/* 整体背景颜色看效果 *//* background-color: palegoldenrod; */}/* 顶部 */#top{width: 970px;height: 103px;/* 在最开始设置整体布局可以写一下 *//* background-color: pink; */}/* 红色的盒子 */.left1{float: left;width: 277px;height: 103px;background-color: red;}/* 右边 */.right1{float: right;width: 679px;height: 103px;}/* 语言选择 */.chinese{float: right;width: 137px;height: 49px;background-color: green;margin-bottom: 8px;}/* 导航条 */.banner{overflow: hidden;width: 679px;height: 46px;background-color: green;}/* 中部 */#middle{width: 970px;height: 435px;/* background-color:pink ; */margin-top:8px ;}/* 黄色部分 大广告 */.left2{float: left;width: 310px;height: 435px;background-color: yellow;margin-right: 10px;}/* 中部的中部部分 蓝色部分 */.center{float: left;width: 450px;height: 435px;}.one{width: 450px;height: 240px;background-color: skyblue;}.two{width: 450px;height: 110px;background-color: skyblue;margin-top: 10px;}.three{width: 450px;height: 30px;background-color: skyblue;margin-top: 10px;}.right2{overflow: hidden;width: 190px;height: 400px;background-color: purple;}/* 深蓝色 */.blue{float: left;width: 648px;height: 25px;background-color: blue;margin-top: 10px;}/* 底部 */#bottom{width: 970px;height: 40px;background-color: darkorange;margin-top: 10px;}/style
/head
body!-- 整体盒子模型 --div idall!-- 顶部 --div idtop!-- 红色的盒子 --div classleft1/div!-- 右部分 --div classright1div classchinese/divdiv classbanner/div/div/div!-- 中部 --div idmiddle!-- 黄色部分 --div classleft2/div!-- 浅蓝色部分 --div classcenterdiv classone/divdiv classtwo/divdiv classthree/div!-- 深蓝色 --div classblue/div/div!-- 紫色 --div classright2/div/div!-- 底部 --div idbottom/div/div
/body
/html公告
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0px;padding:0px;}#all{width: 500px;height: 400px;}.top{width: 480px;/* height: 100px; */margin: 10px;margin-bottom: 0px;border-top: 1px dashed;} .bgc{width: 480px;height: 20px;background-color: rgb(227, 235, 241);}p{display: inline-block;border-left:3px solid blue ;padding-left: 16px;margin-left: 5px;font-size: 24px;/* margin-top: 20px; */color: blue;font-weight:bolder;}.top a{float: right;margin-top: 10px;color:blue ;}a{text-decoration: none;}.one{width: 480px;height: 2px;background-image: linear-gradient(to right , rgb(61, 47, 187),red);margin-top: 5px;}.bottom{width: 500px;}.bottom li{border-bottom: 1px dashed rgb(210, 207, 207);background: url(..//imgs/triangle1.png) no-repeat 4px;background-size: 12px 12px;padding: 5px;padding-left: 24px;margin: 10px;}span{float: right;}/style
/head
body!-- 整体 --div idall!-- 通知公告 --div classtopdiv classbgc/divp通知公告/p a href#更多》/adiv classone/div/div!-- 内容 --div classbottomullia href#哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈/aspan2014年9月28号/span/lilia href#哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈/aspan2014年9月28号/span/lilia href#哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈/aspan2014年9月28号/span/li/ul/div/div
/body
/html
