基础选择器
标签选择器
p{
color:red;
}
类选择器
class
.red{
color:red;
}
多类名选择器
<div class = "red font20">
多类名选择器要用一个空格
</div>
Id选择器
<div id = "nav">
id选择器,id只能调用一次,别人不允许调用
</div>
# nav{
color:red;
}
通配符选择器
// *把所有的标签html,div,body改成红色
*{
color:red;
}
//清除所有标签的内外边距
*{
margin: 0;
padding :0;
}
字体属性
文本字体
//通常给body设置
body{
font-family:'MIcrosoft Yahei'
}
字体大小
p{
font-size:20px;
}
字体粗细
p{
font-weight:normal/bold
}
字体样式
p{
font-style:normal/italic
}
简写
font: (font-style) (font-weight) font-size/line-height font-family
文本属性
对齐文本
//本质是让盒子里面的内容对齐
div{
text-align:center/left/right
}
文本缩进
//首行的缩进
div {
text-indent: 10px;/2em(相对于文字大小)
}
行间距
//行间距 = 上间距 + 文本高度 + 下间距
p {
line-height: 26px;
}
复合选择器
后代选择器
//选择父元素里面的子元素
ol li {
color:red;
}
子选择器
子选择器只能选择作为某元素最近一级的子元素
div > p {
color:red;
}
并集选择器
div,
p,
.pig li{
color:pink;
}
伪类选择器
链接伪类
因为a链接在浏览器中具有默认样式,所以实际工作中都需要给链接单独指定样式
a {
color:red;
text-decoration:none;
}
a: hover{
color:pink;
}
:focus伪类选择器用于选取获得焦点的表单元素
一般情况类表单才能获取到,因此这个选择器也主要针对表单元素来说
input:focus {
background-color:yellow;
}
元素显示模式
块元素
<h1> <p> <div> <ul> <li>
-
高度,宽度,外边距可以控制
-
宽度默认是容器(父级宽度)的100%
-
是一个容器及盒子,里面可以放行内或者块级元素
行内元素
<span>
-
相邻行内元素在一行上,一行可以显示多个
-
高宽的直接设定是无效的
-
默认宽度就是它本身内容的宽度
-
行内元素只能容纳文本或者其他行内元素
行内块元素
--<img>--<input>--
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白间隙,一行可以显示多个(行内元素特点)
- 默认宽度就是它本身内容的宽度(行内元素的特点)
- 高度,行高,外边距以及内边距都可以控制(块级元素特点)
模式转换
a {
display: block;//转换为块级元素
}
div {
display:inline;//转换为行内元素
}
span {
display:inline-block;//转换为行内块元素
}
小米侧边栏案例
单行文字垂直居中
让文字的行高等于盒子的高度
a {
display:block;
height:40px;
line-height:40px;
}
css三大特性
- 层叠性
- 继承性
- 优先级
行高的继承
//子元素的行高是子元素文字大小的1.5倍
body {
font: 12px/1.5 Microsoft Yahei;
}
优先级
选择器 | 选择器权重 |
---|---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style="" | 1,0,0,0 |
!important | 无穷大 |
/*复合选择器会有权重的叠加问题*/
/*权重虽然会叠加,但是永远不会有进位*/
/*ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
ul li {
color:green;
}
/* li的权重是0,0,0,1*/
li {
color:red;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
.nav li {
color:pink;
}
盒子模型
边框
border: border-width || border-style || border-color
没有先后顺序
border包含了四条边
内边距
值的个数 | 表达的意思 |
---|---|
padding:5px; | 上下左右都是5px |
padding:5px 10px; | 上下是5px,左右是10px |
padding:5px 10px 20px; | 上内边距为5,左右10,下20 |
padding:5px 10px 20px 30px; | 上右下左分别为5,10,20,30 |
padding会影响盒子的实际大小
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
外边距
外边距可以让块级盒子水平居中,但必须满足俩个条件
- 盒子必须指定了宽度
- 盒子左右的外边距都设置为auto
.header {
margin:0 auto;
}
**行内元素或者行内块元素水平居中给其父元素添加 text-align: center即可 **
外边距塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
解决:
- 可以为父元素定义上边框
- 可以为父元素定义内边距
- 可以为父元素添加overflow:hidden;
还有其他办法,比如浮动,固定,绝对定位的盒子不会有塌陷问题
浮动
浮动特性
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
- 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动之后,它的大小根据内容来决定
- 浮动的盒子中间没有间隙
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
浮动布局的注意点
p182
清除浮动
由于父级盒子在很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0,就会影响下面的标准留盒子
清除浮动的方法
1.额外标签法也是隔墙法,最后加一个额外的标签,W3c推荐
<div style = "clear:both"></div>
2.父级添加overflow属性
//优点:代码简洁
//缺点:无法显示溢出的部分
. 父级元素 {
overflow:hidden;
}
3.父级添加after伪元素
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
<div class = "clear"></div>
4.父级添加双伪元素
.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
<div class = "clear"></div>
定位
静态定位
默认定位方式,无定位的意思
选择器 {
position:static;
}
相对定位
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
选择器 {position:relative;}
特点
- 它是相对自己原来的位置移动的
- 原来在标准流的位置继续占有,后面的盒子不脱标,继续保留原来的位置
绝对定位
绝对定位是在元素移动位置的时候,是相对于它祖宗元素来说的
选择器 {position:absolute;}
特点:
- 如果没有祖宗元素或者祖宗元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位(相对,绝对,固定定位),则以最近一级的有定位祖先元素为参考点移动位置
子绝父相
固定定位
固定定位是元素固定于浏览器可视区的位置,主要使用场景可以在浏览器页面滚动时元素位置不会改变
选择器 {
position:fixed;
}
- 和父元素没有任何的关系
定位的拓展
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin: 0 auto水平居中,但是可以通过以下计算方法实现
- left: 50%: 让盒子左侧移动到父级元素的水平中心位置
- margin-left: -100px; 让盒子向左移动自身宽度的一半
定位的特性
绝对定位和固定定位也和浮动类似
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
元素显示
display 属性
- display: none; 隐藏对象
- display: block; 除了转换为块级元素之外,同时还有显示元素的意思
display隐藏元素后,不再占有原来的位置
visibility可见性
- visibility: visible; 元素可视
- visibility: hidden; 元素隐藏
visibility隐藏元素后,继续占有原来的位置
如果隐藏的元素想要原来的位置,就用visibility: hidden
如果隐藏的元素不想要原来的位置,就用display:none(用处更多)
overflow溢出
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏 |
scroll | 不管超出的部分,总显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
布局技巧
margin妙用
ul li {
float: left;
life-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover{
//如果盒子没有定位,则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
}
ul li:hover{
z-index:1;
border: 1px solid blue;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-90DmVJAF-1645060826245)(css.assets/image-20220215101429212.png)]
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容,超出的部分隐藏 |
| scroll | 不管超出的部分,总显示滚动条 |
| auto | 超出自动显示滚动条,不超出不显示滚动条 |
布局技巧
margin妙用
ul li {
float: left;
life-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover{
//如果盒子没有定位,则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
}
ul li:hover{
z-index:1;
border: 1px solid blue;
}