CSS常用样式-盒模型扩展应用
- 清除默认样式
- 大部分标签都有一个浏览器加载的默认样式,会对布局造成一些影响。为了避免默 认样式对整体布局效果造成影响,一定要清除默认样式
- 盒模型属性中内外边距:大部分容器级标签都有默认边距,要么用标签选择器的并 集方式,要么通配符清除。
- 两种列表
- 和
- 标签的默认样式,顺带设置页面中常用的a的公共样式:设置 color 和 text-decoration。
- 清除默认加粗效果:设置font-weight
- 有默认的列表前缀:清除 list--style 属性。
* { /* 清楚盒模型属性中内外边距 */ margin: 0px; padding: 0px; } ul,ol { /* 清楚列表默认样式 */ list-style: none; } a { color: #666; text-decoration: none; } h1,h2,h3,h4,h5,h6,b,strong{ font-weight: normal; } body { color: #666; font-size: 14px; font-family: Arial,consolas, Microsoft Yahei, SimSun; }-
height 应用
-
根据不同的需求,高度属性可以设置也可以不设置
-
如果设置了高度:盒子占有的高度位置就确定死了,后面的同级元素会紧挨着加载。
-
如果不设置高度:会根据标签内部内容高度自动撑开。
-
以
标签为例,根据情况不同选择是否设置高度 -
overflow 属性【处理溢出情况】
- 设置了高度的盒子,如果内部元素的加载高度超过父级,会出现溢出效果。 可以通过一个溢出的属性 overflow,进行溢出部分内容的显示效果设置。
- visible 默认值,不能解决溢出部分问题
- hidden 溢出部分直接隐藏
- scroll 溢出部分出现滚动条
- auto 自动的,如果溢出会自动出现滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .demo1{ width: 200px; height: 200px; border: 1px solid red; /* 溢出问题解决 overflow 1.visible 默认值,不能解决溢出部分问题 2.hidden 溢出部分直接隐藏 3.scroll 溢出部分出现滚动条 4.auto 自动的,如果溢出会自动出现滚动 */ overflow: auto; } </style> </head> <body> <div class="demo1"> 对酒当歌,人生几何!</br> 譬如朝露,去日苦多。</br> 慨当以慷,忧思难忘。</br> 何以解忧?唯有杜康。</br> 青青子衿,悠悠我心。</br> 但为君故,沉吟至今。</br> 呦呦鹿鸣,食野之苹。</br> 我有嘉宾,鼓瑟吹笙。</br> 明明如月,何时可掇?</br> 忧从中来,不可断绝。</br> 越陌度阡,枉用相存。</br> 契阔谈䜩,心念旧恩。</br> 月明星稀,乌鹊南飞。</br> 绕树三匝,何枝可依?</br> 山不厌高,海不厌深。</br> 周公吐哺,天下归心。</br> </div> </body> </html> -
-
居中
- 水平居中:text-align属性
- 单行文本垂直居中:让文字行高 line-height 等于盒子高度 height。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .demo1{ border: 1px solid red; text-align: center; height: 100px; line-height: 100px; } </style> </head> <body> <div class="demo1">你好</div> </body> </html>- 多行文本垂直居中:让元素高度自适应或者正好等于多行文字的高度,设置元素内 边距上下值相同。
- 一个元素内部嵌套的子元素,在父元素中居中。垂直居中:与多行文字类似,让父元素高度自适应,子元素高度自动撑开父级的高 度,再给父元素设置相同的上下边距。
- 元素水平居中
- 针对类似 样式上必须独占一行的盒子,如果子盒子宽度低于父盒子宽度,可以设置子盒子的 margin值,水平方向的值都设置为 auto。原因:auto 只在水平方向有作用,水平方向的 margin 如果设置为 auto,边距会自动无限增大,直到撑满整个父元素除了子元素宽度之外剩余的区域,如果两个水平方向都是auto,两边都要无限大,只能达到一个平衡,两边距离相同,导致盒子居中。
- 针对类似
-
父子盒模型
-
一般情况下,一个父元素内部可以放一个或多个子元素,而且多个子元素要排成一 行显示,必须保证父元素的宽度一定要足够(不考虑溢出情况),需要遵循一个设 置尺寸的规律:所有子元素的宽度加在一起不能大于父元素的宽度 width。
-
父元素的width ≥ 所有子元素width + padding + border + margi如果不满足条件:要么多余的子元素掉下来不能在一排,要么溢出父元素
-
特殊情况:盒模型自动内减
-
父子盒模型中,只有一个子元素,且子元素是类似
标签必须占一行的。不设置子元素的 width 属性,子元素的 width 属性值会自动加载父级元素的 width。 如果同时设置了子元素水平方向的 padding 和 border 、margin,不需要手动去进 行内减,子元素的 width 会自动收缩尺寸。 -
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
-
-
margin 塌陷现象
- margin 塌陷现象:在垂直方向如果有两个元素的外边距有相遇的,浏览器中加载的 真正的外边距不是两个间距的加和,而是两个边距中值较大的,边距值小的塌陷到 了边距值大的值内部。
- 同级元素塌陷
- 上面的元素有下边距,下面的元素有上边距,两个边距相遇,真正的盒子间距离是 较大的那个值
- 父子元素塌陷
- 父子元素之间也会出现 margin 塌陷,父元素和子元素都设置了同方向的margin-top 值,两个属性之间没有其他的内容进行隔离,导致两个属性相遇,发生 margin 塌陷。
- 本身父元素与上一个元素的距离是0,子元素如果设置了垂直方向的上边距,会带着 父级一起掉下来。
标准文档流
- 标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的 流式排列方式。前面内容发生了变化,后面的内容位置也会随着发生变化。 - HTML就是一种标准文档流文件。 - HTML中的标准文档流特点通过两种方式体现:微观现象和元素等级。微观现象
- 空白折叠现象 - 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果 - 自动换行,元素内一行内容写满元素的 width 时会自动进行换行元素等级
- 在标准流中,大部分元素是区分等级的,习惯将元素划分为几种常见的加载级别: 块级元素、行内元素、行内块元素等 - 块级元素:大部分容器级标签包括p标签都是块级元素,比如 <div> 、<h1> 等 - a、块级元素可以设置宽高,在浏览器中正常加载。 - b、块级元素必须独占一行,不能与其他任何标签并排一行。 - c、块级元素如果不设置宽度,会自动撑满父级的 width 区域;高度不设置,会被内 容自动撑开高度。 - 行内元素:大部分的文本级标签,比如 <span>、<a>、<b> 等 - a、行内元素不能正常加载宽度和高度属性,其他的盒模型属性虽然能设置,但是容 易出现加载问题。 - b、行内元素可以与其他的行内或行内块元素并排一行显示。 - c、行内元素不论是否设置宽高,宽度和高度都只能被内容自动撑开。 - 行内块元素:比如 <img>、<input> 等 - a、行内块元素可以设置宽度和高度。 - b、行内块元素可以与其他的行内或行内块并排一行显示。 - c、行内块元素如果不设置宽高,要么以原始尺寸加载要么被内容自动撑开。 - d、行内块依旧具有标准流的微观性质,例如空白折叠现象。CSS 常用样式-显示模式
- 显示模式 display - 标准流中的元素有自己默认的浏览器加载模式,但是加载模式不是一成不 变的,后期可以通过 display 属性更改一个标签的显示模式。 - 属性值:元素根据属性值不同,可以加载对应元素等级的显示模式的特点。 - block表示元素要以块级元素模式加载,具备块级特点 - inline表示元素要以行内元素模式加载,具备行内特点 - inline-block表示标签要以行内块模式加载,具备行内块特点 - none表示标签及内部内容直接隐藏,让出原有标准流的位置 - 脱离标准流 - isplay 属性更改的显示模式并没有改变标准流本质性质,页面还是只能从上往下 加载,存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准 流的限制。 - 标签元素脱离标准流的方法包括:浮动、绝对定位、固定定位