一、水平布局
1、面试题:什么是过度约束,浏览器如何调整?
浏览器规定一个元素水平方向的7个值相加必须要等于其父元素内容区的宽度,
如果不等于的话,浏览器就会强制调整这7个值,让你相等。我们管这个过程叫过度约束
margin-left border-left padding-left width padding-right border-right margin-right
0 10 0 100 0 10 0 == 600
120 =? 600
2、如何调整的方法:
1、如果水平方向7个值当中没有auto,那么浏览器自动调整就是margin-right
0 10 0 100 0 10 380 == 600
2、水平方向7个值当中,有三个值可以被设置为auto,width、margin-left、margin-right
有1个auto ,谁是auto就调整谁
width为auto
0 10 0 580 0 10 0 == 600
margin-left
480 10 0 100 0 10 0 == 600
margin-right
0 10 0 100 0 10 480 == 600
有2个auto width、margin-left;width、margin-right;margin-left、margin-right
width、margin-left 为auto 调整的是width
width、margin-right 为auto 调整的是width
margin-left、margin-right 为auto margin-left、margin-right各占一半,把元素挤到中间
有3个auto
width、margin-left、margin-right都为auto,调整的是width
总结:有auto的话
width>margin-left、margin-right
主要是针对图文垂直对齐方式,或者表格垂直对齐方式
vertical-align: middle;
二、垂直布局
块元素的高度默认情况是被内容撑开的,那如果设置,设置多少是多少
一般情况,我们不给父元素设置固定的高度,
让它根据子元素的内容自动调整高度
垂直布局
overflow属性
可选值:
visible 默认值 正常显示
hidden 剪裁多余
auto 自动根据内容显示是否出现滚动条
scroll 生成双向滚动条
三、外边距的折叠
垂直外边距的重叠
1、兄弟元素
如果两个都是正值,谁大听谁的
如果两个都是负值,绝对值谁大听谁的
如果一正一负,两者相加,听最终结果
总结:兄弟元素的外边距重叠,对我们开发来讲,
一般是有利,所以不用做特殊调整
2、父子元素
父子外边距重叠,它会影响页面其他元素,所以必须要调整
如何调整
1、不用margin-top,给父元素用padding-top,同时减小父元素的高度
2、在父子之间用边框隔开
3、开启元素的BFC(隐含属性)
overflow:hidden;
四、内联元素的盒子
1、行内元素的盒子模型
内容区 不能设置宽高,是被内容撑开
内边距 可以设置,但垂直方向不会改变页面的布局,也就是不会挤别人
边框 可以设置,但垂直方向不会改变页面的布局,不会挤别人
外边距 垂直方向不能设置外边距,水平方向可以设置,而且水平方向外边距不会重叠
2、display 用来设置元素显示的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块块元素(即可以设置宽高,又不会独占一行)
table 将元素设置为一个表格
none 元素不在页面中显示(隐藏一个元素)
3、visibility 用来设置元素的显示状态
可选值:
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示(隐藏一个元素),位置依然保留
面试题:
隐藏元素有几种方式,几者区别是什么
1、display:none; 删除了元素,元素位置不保留
2、visibility:hidden; 元素位置保留
3、将元素变为透明 元素位置保留
五、默认样式
1、重置样式表,专门用来对浏览器的样式进行重置
注意:
a、引入reset.css文件,前提是这个文件要有
b、引入reset.css文件一定是在你写的样式之前引入
2、默认样式:
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,
所以为很多的元素都设置了一些默认的margin和padding等等
而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认样式都去除
方式一:
a:清除浏览器的默认样式,手写,这种方式只适用于结构简单,小的练习
方式二:
b:引入重置样式表
六、阴影和圆角
1、box-shadow
用来设置元素的阴影效果,不会影响到页面布局
第一个值:水平偏移量 正->左 负->右 ,必选
第二个值:垂直偏移量 正->下 负->上 ,必选
第三个值:模糊半径 默认0px,可选
第四个值:颜色 默认是黑色,可选
2、border-radius
用来设置圆角 以10px为半径画圆
border-radius: 50%; 设置圆形
borde-top-right-radius
border-top-left-radius
border-bottom-left-radius
border-bottom-right-radius