黑马程序员技术交流社区
标题:
CSS基础知识
[打印本页]
作者:
猛男
时间:
2019-4-19 22:51
标题:
CSS基础知识
选择器使用：
可以分为：
基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器、类选择器、
id
选择器
高级选择器（复合选择器）：
后代选择器、指定标签选择器、并集选择器
类选择器：
定义： 在css里面用点“ . ” + 类名称 +{ css键值对 } 进行样式定义
调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用
注意：命名规则是
不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束
id选择器：
定义： 在css里面用 “ # ” + id名称 +{ css键值对 } 进行样式定义
调用：在html里面哪个标签需要，就在开始标签使用id=“id称”进行调用
注意：命名规则是
不能用纯数字、不能数字开头的、不可以中文命名、可以用数字结束
类选择器和id选择器的使用区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称，id选择器是唯一的
不能重复使用
，一个id名称
一个页面只能出现一次
后代选择器:
因为
Html布局有嵌套关系，我们可以通过父亲再往下找，找到子集元素，父级 + 空格+子级元素{ css键值对}
并集选择器:
样式一致的盒子如果单独设置样式需要书写多次，我们可以把样式相同的盒子只写一个样式，用英文的逗号隔开即可,
使用并集选择器书写代码可以节约代码量
链接的伪类:
四种状态：
a:link 未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover 鼠标移动到连接上（鼠标经过）
a:active 选定的链接（按下鼠标的时候）
注意：以上的顺序
不能
颠倒,四种状态不会全部使用
盒子的实体化三属性:
宽 width
高height
背景 background
实体化设置的好了就不会出现兼容问题，更能直观的表现出盒子的状态
权重计算
第一等：代表内联样式，如: style=””，权值为 1,0,0,0
第二等：代表ID选择器，如：#content，权值为 0,1,0,0
第三等：代表类，伪类和属性选择器，如.content，权值为 0,0,1,0
第四等：代表类型选择器和伪元素选择器，如div p，权值为 0,0,0,1
平时的样式有时候不生效可能就是权重不够，可以添加权重使得样式生效，权重计算不进位
-------------------------------------------------------------------------------------------------
内边距
：padding 拉开内容到盒子边缘的距离；
外边距
：margin 拉开盒子与盒子之间的距离；
盒子阴影
：
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/ 外阴影
实际常用设置：box-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色
浮动布局的注意点
：
利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题
所有的浮动布局在效果图量取的宽高必须一模一样
清除浮动
：
环境1：标准流（默认情况下）：父级盒子嵌套子级盒子，如果不给父级盒子设置固定的高度，父级盒子默认的高度为0，但是实际的高度是子级盒子撑开的
环境2：浮动流（浮动布局）：父级盒子嵌套子级盒子，如果不给父级盒子设置固定的高度，父级盒子里面的子级盒子设置浮动float属性，父级盒子的高度不会被撑开，就是默认的0，这样就会影响我们后面的盒子正常显示
清除浮动本质
：
父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题
清除浮动的方法
：
额外标签法，父级加overflow属性法，使用after伪元素法，使用双伪元素清除浮动
额外标签法：在浮动元素的末尾添加一个空的标签：例如：<div style=“clear:both;”></div>
父级加overflow属性法：直接给父级添加overflow:hidden，强制的撑开父级
after伪元素法:
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
双伪元素清除浮动
：
.clearfix:before ,.clearfix:after {
content: "";
display: table;
}
clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2