css基础属性

基础选择器

标签选择器

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. 层叠性
2. 继承性
3. 优先级

行高的继承

//子元素的行高是子元素文字大小的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不会撑开盒子大小

外边距

外边距可以让块级盒子水平居中，但必须满足俩个条件

1. 盒子必须指定了宽度
2. 盒子左右的外边距都设置为auto

.header {
    margin:0 auto;
}

**行内元素或者行内块元素水平居中给其父元素添加 text-align: center即可 **

外边距塌陷

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决：

1. 可以为父元素定义上边框
2. 可以为父元素定义内边距
3. 可以为父元素添加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;}

特点

1. 它是相对自己原来的位置移动的
2. 原来在标准流的位置继续占有，后面的盒子不脱标，继续保留原来的位置

绝对定位

绝对定位是在元素移动位置的时候，是相对于它祖宗元素来说的

选择器 {position:absolute;}

特点：

1. 如果没有祖宗元素或者祖宗元素没有定位，则以浏览器为准定位
2. 如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置

子绝父相

固定定位

固定定位是元素固定于浏览器可视区的位置，主要使用场景可以在浏览器页面滚动时元素位置不会改变

选择器 {
    position:fixed;
}

• 和父元素没有任何的关系

定位的拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto水平居中，但是可以通过以下计算方法实现

1. left: 50%: 让盒子左侧移动到父级元素的水平中心位置
2. margin-left: -100px; 让盒子向左移动自身宽度的一半

定位的特性

绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位)会压住下面标准流所有的内容

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

元素显示

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;
}