文章目录

• 盒子模型
• 1：标准盒模型具体的css属性
• 2：padding的用法：
• padding的设置方法：

• margin设置方法：
• margin常出现的BUG:

• 文本溢出变省略号设置

标准盒模型：网页布局的基石，从盒子的内部到盒子的外围。

先有框架，再有内容嘛，

结构(HTML)是重点，样式(CSS)是用来修饰结构的。

所以要先确定HTML标签，再来选用合适的CSS样式。布局的标签是通过HTML内在的上下文语境来决定当前的语义化的结构，

盒子模型

盒模型：

​ 网页布局的基石，从盒子的内部到盒子的外围：

​ 内容（图片、文本、视频、小盒子…）

​ 内填充（补白）

​ 盒子本身（border）

​ 外边距 （margin）

1：标准盒模型具体的css属性

​ 内填充：padding属性 （不能为负值）

​ 外边距：margin属性 （可以设负值）

2：padding的用法：

作用：控制子元素在父元素里面的位置关系。

​ 【让文本和盒子的周围产生间距

​ 给盒子添加泡沫（padding）】

• padding是长在 内容 和 盒子之间的距离
• padding是长在盒子里面的。
• padding的作用：主要控制子元素在盒子内部的位置关系。
• padding是添加在父元素上面。
• padding可以把盒子撑大！！

​ 如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding !!

​ 注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减。

• 单一方向上设置padding值：

padding-left:

​            padding-right:

​            padding-top:

​            padding-bottom:

padding的设置方法：

padding:一个值   四周都padding

​            padding:两个值   上下    左右

​            padding:三个值   上  左右  下

​            padding:四个值   上   右     下     左

• padding不会对背景图的位置造成影响。
• padding不能为负值。

​

3：margin的用法：

作用:控制元素与元素之间的间距

​ 【让两个盒子（同级的盒子）之间，产生一定距离。

​ 盒子的周围产生间距。】

• argin 是长在盒子外围的。
• margin 控制当前元素 与 其他同级元素的位置关系。
• margin不会改变盒子内部的大小。
• 给元素的单一一个方向设置margin值

margin-right:

​            margin-left:

​            margin-top:

​            margin-bottom:

margin设置方法：

margin:一个值   四周

​            margin:两个值   上下   左右

​            margin:三个值   上  左右  下

​            margin:四个值   上右下左

• margin是可以设置负值的！

margin常出现的BUG:

​ A: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。

​ B: 当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面

比如：有两个div，上方的div，设置margin-bottom=“50px” 下方的div设置margin-top=“50px”，那么两个div之间的距离是多少？因为A，得出50px

文本溢出

overflow

• visible:默认值，内容不会被修剪，会呈现在元素框之外；
• hidden：内容会被修剪，并且其余内容是不可见的；
• scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
• auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
• inherit：规定应该从父元素继承overflow属性的值。

white-space

• normal：默认值，多余空白会被浏览器忽略只保留一个；
• pre：空白会被浏览器保留；
• pre-wrap：保留一部分空白符序列，但是正常的进行换行；
• pre-line:合并空白符序列，但是保留换行符；
• nowrap:文本不会换行，文本会在同一行上继续，直到遇到
  标签为止;

text-overflow

• clip：不显示省略号（…），而是简单的裁切;
• ellipsis：当对象内文本溢出时，显示省略标记；

文本溢出变省略号设置

省略号设置：
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden； 4、溢出文本显示省略号：
text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！

起名字的方法：
​ 小写的英文字母开头，
​ 字母数字下划线连字符的组合。
​ 语义化：名字尽量反应内容板块的内容或用途。

每个项目 命名风格保持一致。
起名字不能使用关键字（所有的标签和属性都属于关键字）！

• 点赞
• 收藏
• 分享
• 文章举报