标签样式初始化
为什么要初始化css代码
首先是因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初 始化往往会出现浏览器之间的页面显示差异
其次初始化CSS样式可以提高编码质量,保持代码的统一性,如果不初始化每次用到都要进 行单独的修改,整个页面做完很糟糕,重复的CSS样式很多。
怎么做
使用通配符(*),重置所有的初始样式(color=#536D92]不推荐![/color])
原因:
*(星号)代表通配符表示了所有的标签,编写代码的时候也非常快,但是这样写有一个弊端,就是在网站比较大时,CSS样式文件也很大,这样写时,它会把所有的标签都初始化一遍,这样会加大网站运行的负荷,会让网站加载的时候需要很长一段时间。
用到哪个清除哪个,常见标签清除默认样式如下:
body{
margin: 0;
font: 14px "微软雅黑";
}
font 以(设计图)出现次数最多的字体大小和字体进行设置(字体样式可以继承)
h1,h2,h3,h4,h5,h6,p,dl,dd,figure{
margin: 0;
}
h1,h2,h3,h4,h5,h6,strong,b{
font-weight: normal;
}
em,i,cite{
font-style: normal;
}
ul,ol{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: black;
}
img{
vertical-align: top;
border: none;
}
color以(设计图)出现次数最多的字体颜色进行设置
所有转为inline-block的元素,记得最好也加上vertical-align:top
标签类型转换
display:
- block 块
- list-item (列表项,在块的基础上多了列表样式)
- inline 内联
- inline-block 内联块
- none 无(该元素会隐藏起来,经常可以用来做下拉菜单)
注意:本身是内联,通过display转为块的标签,是可以放在内联标签里面的
转化为inline-block
- 注:元素换行会产生(解析)空格,给父级加font-size:0;进行处理
- 注:转化为inline-block之后记得给元素加上vertical-align:top;(默认基线对齐 方式改为顶部对齐,处理底部出现空隙的问题
浮动(float)
1.CSS 布局的三种机制
CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:
- 普通流(标准流)
- 块级元素会独占一行,从上向下顺序排列;
- 常用元素:div、hr、p、h1h6、ul、ol、dl、form、table
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;
- 浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
- 定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位,特别是后面的 js 特效。
2.为什么需要浮动?
思考题:
我们首先要思考以下2个布局中最常见的问题?
- 如何让多个盒子(div)水平排列成一行?
- 如何实现盒子的左右对齐?
虽然我们前面学过行内块(inline-block) 但是他却有自己的缺陷:
- 它可以实现多个元素一行显示,但是中间会有空白缝隙,不能满足以上第一个问题。
- 它不能实现以上第二个问题,盒子左右对齐
一句话总结
因为一些网页布局要求,标准流不能满足我们的需要了,因此我们需要浮动来完成网页布局。
我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式
3.什么是浮动(float)
概念:元素的浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制
- 移动到指定位置。
作用
- 让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段。
- 可以实现盒子的左右对齐等等..
- 浮动最早是用来控制图片,实现文字环绕图片的效果。
语法
在 CSS 中,通过 float
中文, 浮 漏 特 属性定义浮动,语法如下:
选择器 { float: 属性值; }
属性值 | 描述 |
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动的特征:
- 使用浮动的元素会排成一行。
- 使用浮动的内联样式会支持宽高,变在块样式;
- 使用浮动的样式,默认是由内容撑开宽度高度;
- 支持margin,padding。但不是支持margin:auto;
BFC(Block Formatting Context )块级格式化上下文
一个独立渲染区域的名称(布局环境的名字),只有Block-level box参与,它规定了内部的Block-level box 如何布局,并且不影响BFC区域以外的内容,当然BFC以外的也影响不了里面的。
在这一套规则下面,【元素里面的内容不会干扰元素外面的内容】,所有的元素都会按照文档流的排列方式进行排列。
BFC的作用:
- 包含浮动元素,解决父级高度塌陷问题
- 阻止margin的传递
- 不被浮动元素覆盖
BFC的触发条件:
- float值不为none;
- overflow值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute 、 fixed
4.浮动(float)的扩展
1). 浮动元素与父盒子的关系
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠,也不会超过父盒子的内边距
2). 浮动元素与兄弟盒子的关系
在一个父级盒子中,如果前一个兄弟盒子是:
- 浮动的,那么当前盒子会与前一个盒子的顶部对齐;
- 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流。
建议:
如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
清浮动
1.为什么要清除浮动
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。
2.清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
3.清除浮动的方法
在CSS中,clear属性用于清除浮动,在这里,我们先记住清除浮动的方法,具体的原理,等我们学完css会再回头分析。
选择器{clear:属性值;} clear 清除
属性值 | 描述 |
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
但是我们实际工作中, 几乎只用 clear: both;
1.额外标签法(隔墙法)
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,或则其他标签br等亦可。
- 优点: 通俗易懂,书写方便
- 缺点: 添加许多无意义的标签,结构化较差。
2.父级添加overflow属性方法
可以给父级添加: overflow为 hidden| auto| scroll 都可以实现。
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
3.使用after伪元素清除浮动
:after 方式为空元素额外标签法的升级版,好处是不用单独加标签了
使用方法:
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
Δ after
给当前父级添加一个,处于最后位置的子元素(clear只对前面的元素有效)
Δ content
添加内容
Δ display:block
只有添加给块标签有效
Δ clear:both
同时清除左右方向的浮动
注意:上述任何一项都不可以丢!!!
- 优点: 符合闭合浮动思想 结构语义化正确
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
4.使用双伪元素清除浮动
使用方法:
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 优点: 代码更简洁
- 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
5. 如果可以使用固定高度,可以直接给父级添加固定高度(不推荐)
6. 父级触发BFC
BFC的触发条件
4.清除浮动总结
什么时候用清除浮动呢?
- 父级没高度
- 子盒子浮动了
- 影响下面布局了,我们就应该清除浮动了。
清除浮动的方式 | 优点 | 缺点 |
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差。 |
父级overflow:hidden; | 书写简单 | 溢出隐藏 |
父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
伪元素(before和after)
伪元素:利用css给一个标签创建出来的子级元素,该元素在页面中真实存在,但是在html中并不存在。
before:
往指定的标签的内部的 前端 添加内容
after:
往指定的标签的内部的 后端 添加内容
注意:before和after都需要利用content添加内容,所有的样式针对该内容进行设置
content可以添加的内容:
文字
<head>
<style>
.box{
color:green;
}
.box:before{
content: '陌';
color:red;
}
.box:after{
content: '花';
color:blue;
}
</style>
</head>
<body>
<div class="box">上</div>
</body>
调用当前元素的属性
<head>
<style>
a::after{
content:attr(href);
}
</style>
</head>
<body>
<a href="https://moshanghua.net/"></a>
</body>
url() 引用媒体文件
<head>
<style>
div::after{
content:url(1.png);
}
</style>
</head>
<body>
<div>这是一张图片</div>
</body>
添加图标
-借助一些现有的图标库,通过content添加