关于css我的认识
关于css我的认识
简述css
css（Cascading Style Sheet）层叠样式表。用于实现网页布局，美化网页. 学习css就是学习它的属性，选择器.
引用css
引用css有三种方法：
- 行内，在标签上使用style属性设置即可.
- 内部，在head标签中，使用style标签引用.
- 外部，创建一个.css后缀名的独立文件，在head标签中使用link标签引用.
css选择器
1）id选择器
要使用id选择器，需要分成两个步骤：
第一步，需要在对应的标签中增加一个id属性
第二步，需要在css中，使用#+id属性值
2）标签选择器
标签 + 属性 + 内容
3）class选择器
也叫类选择器，使用也是分为两步：
第一步，需要在对应的标签中设置class属性，并设置对应值
第二步，在css的规则中，使用 .+class属性值
4）通配选择器
经常用*来去掉所有标签的margin和padding。
* {margin:0;padding:0;}
5）分组选择器
两个选择器之间使用逗号进行分隔。
h1,h2 {font-size:12px;}
6）后代选择器
用空格搁开
.main h1{font-size:14px;}
7）伪类选择器
如：a标签的hover伪类
a:hover{color:gold;}
css属性
CSS属性的分类：
1）字体相关
2）文本相关
3）盒子模型相关
4）布局相关
5）列表相关
6）定位相关
7）表格相关
…
css属性有很多，但是经常使用的也就二十多个
字体相关
font-style:设置字体是否倾斜 normal italic
font-weight:设置字体是否加粗 normal bold bolder 100 200 300
font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的12px 和 14px 可以非常大 不能非常小 最小是12px
font-family: 设置字体类型 和用户电脑上设置的字体也有关系
font:上面的几个属性的复合属性
font:font-style font-weight font-size/line-height font-family
font-style font-weight 可以不写 也可以交换位置
font-size/line-height font-family 必须写 能交换位置
文本相关
text-decoration: 用来设置文本的装饰线 下划线 删除线
underline 下划线 应用：把a标签的默认的下划线去掉 hover时，加上下划线
line-through 删除线 应用：超市的价格
text-indent: 首行空两格 2em 空两个汉字的宽度 -1000em 用来隐藏一个盒子中的文本
text-align: 1）让盒子中的文本居中 2）让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本）
盒子模型
盒子分为：块级盒子，行级盒子，行内块级盒子.为了好记 我们将他们称为男盒子（块级），女盒子（行级），人妖盒子（行内块）
常见的块级：div，hn，p，ul，ol，li，dl，dt，dd，form，table
常见的行内：a，span，em，strong
常见的行内块：img，input
]
1）内容区域：宽与高：width 和 height
对于男盒子来说，有width和height； 女盒子则没有
宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
若不设置高度，男盒子的高度是内容的高度，即高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
2） 内填充区域： padding
用来设置内填充，也叫补白 表示内容区域和边框之间的距离
四个方向： 用的也比较多的
padding-top:
padding-right:
padding-bottom:
padding-left:
padding后面也可以跟一个值，二个值，三个值，四个值：
一个值：padding:10px 四个方向的padding都是10px
二个值：padding:10px 20px; 上下是10px 左右是20px
三个值：padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：padding:10px 20px 30px 40px; 上 右 下 左
3） 边框： border
边框的粗细 border-widht 边框的粗细：粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细是不一样的
边框的样式 border-style solid 实线 dashed 虚线 none 没有线
边框的颜色 border-color 单词 用的最多还是16进制 也可以使用rgb函数
一般使用border进行书写 border是复合属性， 例如：border:1px solid red;
border后面的属性是没有顺序的，但是一般都是先写border-width,然后是border-style，最后是border-color。
也可以单独设置某一个方向上的border border-top:1px solid red;
4） 外填充区域：margin
表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
四有个方向：
margin-top
margin-right
margin-bottom
margin-left
margin后面也可以跟一个值，二个值，三个值，四个值：
一个值：margin:10px 四个方向的margin都是10px
二个值：margin:10px 20px; 上下是10px 左右是20px
三个值：margin:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值：margin:10px 20px 30px 40px; 上 右 下 左
布局相关
三大布局：
1.标准流
从左到右，从上到下块级元素独占一行，行内元素碰到父盒子边缘换行
2.浮动
图文环绕，实现网页布局。实现布局，使得块级元素能够在同一行中排列
使用：float：属性值 有 left；right
浮动有如下三大特征：
1）包裹性
如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可。如果我对一个块级元素已经设置了width，则不会具备包裹性
2）破坏性
在一个块级容器中（如div），如果它的子元素，都有浮动（比如float），并且没有清除这个浮动，那么块级容器将会塌陷。
如何解决这种塌陷？？
一，在块级容器中，使用overflow:hidden
二，在块级容器结束之前，添加一个空的div标签，然后设置clear：both的属性
三，给块级元素指定一个height值
3）块级框
如果一个行内元素，设置了浮动（left或right）之后，它就会变成块级框，就可以设置其盒模型的所有属性，如width和height
3.层布局
在css中，有三种定位方式：相对定位，绝对定位，固定定位
relative，相对定位 absolute，绝对定位 fixed，固定定位
css问题处理
浮动清除
浮动需要清除，如果不清除，会对后面的内容造成影响
清除可以使用clear属性来完成: clear属性有三个值，left、right和both，通常就使用both。
溢出处理
overflow：溢出 作用：用于处理内容溢出的情况
有如下四种属性值:
visible：表示可见，它是默认值
hidden：表示隐藏
scroll：生成一个滚动条
auto：自动
塌陷问题
1.兄弟元素之间的重叠问题：
"><div class="box7">box7</div>
<div class="box8">box8</div>
.box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
.box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}
按理说：两个盒子之间的margin应该是250px
实际上：只有150px
这种现象叫：margin的塌陷
margin塌陷的前提：1）男标签 2）垂直方向
margin到底是多少：取大原则
如何避免塌陷？
答:只设置一个盒子的margin。
2.父子元素之间的重叠问题:
<div class="box9">
<p class="box10">我是一个段落</p>
</div>
.box9{
background-color: pink;
margin-top: 50px;
}
.box9 .box10{
background-color: gold;
margin-top: 30px;
}
按理说：p标签上面的应该有80px的margin
实际是：只有50px margin
这种现象叫：父子元素之间的margin重叠
解决：
1）给父元素加border
2）给父元素加padding 只加一个0px不行
以上仅为我的认识，对于css还有很多细挖的东西
本文地址：https://blog.csdn.net/yang_fzz/article/details/107280726