尚硅谷web前端——CSS（三）

CSS（三）

一、行内元素的盒模型

1、 行内元素不支持设置长宽
2、行内元素可以设置padding，border，margin，垂直方向不会影响页面布局
3、display用来设置元素显示类型：

• inline 行内元素
• block 块元素
• inline-block 行内块元素，既可以设置宽高，又不会换行
• table 将元素设置为表格
• None 元素不在页面中显示，不占位置

4、visibility用来设置元素显示状态

• visible 默认值，正常显示
• hidden在页面中隐藏，不显示，但是仍占位置

二、浏览器的默认样式

1、通常浏览器为元素设置一些默认样式，会影响页面布局，一般需要去除默认样式
2、list-style:none去除项目符号
3、*{margin:0; padding:0;}去除默认样式最简单的方法，但是这样做可能会有残留
4、重置样式表：专门对浏览器的样式进行重置

资料链接：https://share.weiyun.com/yoz4Ok6o

三、盒子大小

1、默认情况下，盒子可见框大小由内容区，内边距和边框共同决定
2、box-sizing用来设置盒子尺寸的计算方式，设置width和height的作用
3、content-box默认，宽度和高度用来设置内容区的大小
4、border-box高、宽用于设置整个盒子可见框大小，即width和height是指三者总大小，自动调整内容区大小

四、轮廓阴影和圆角

1、outline 用来设置轮廓线，用法和border 一样，不会影响可见框大小
2、box-shadow设置元素阴影，不会影响页面布局
box-shadow:xxpx 水平偏移量（正右负左） ， xxpx 垂直偏移量， xxpx阴影的模糊半径 ，#rgba(0,0,0,.3)设置阴影的颜色和透明度
3、border-radius用来设置圆角（四个方向可以单独设置），设置圆的半径大小
具体的可以查看zeal文档

五、浮动

1、通过浮动可以使元素向其父元素的左边或者右边移动（float)
2、float：none (默认）

• none 默认不浮动
• left 向左浮动
• right向右浮动
• 设置浮动后，水平布局的等式不需要强制成立，元素设置浮动以后，会完全脱离文档流，不在占用文档流位置，下边的元素会自动向上移动

3、浮动的效果：使元素可以横向排列

• 浮动元素会完全脱离文档流，不再占用文档流位置
• 设置浮动以后，元素会向父元素的左侧或右侧移动
• 浮动元素默认不会从父元素中移出
• 不会覆盖其他浮动元素，左右移动时不会超过它前边的其他浮动元素（水平方向）
• 若浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
• 浮动元素不会超过其上边的兄弟元素，最多一样高
• 浮动元素不会盖住文字，文字会环绕图片

4、浮动元素的性质会发生改变：

• 块元素不再独占一行
• 块元素的宽、高被内容撑开
• 行内元素脱离文档流后变成块元素