html和css总结一

本是古典何须时尚 2023-02-12 08:30 31阅读 0赞

# 1.盒子模型 #

### 1.1盒子模型的传参 ###

margin:0;  //四个方向都改变
    margin:0 10px; //top,bottom为0px;left,right为10px
    margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;

padding如上

### 1.2元素在盒子中的起始位置 ###

从自身宽度的地方开始

# 2.`HTML`标签的分类 #

### 2.1 标签分类 ###

*  ##### 块标签 #####

//特点
    1.独占一行
    2.能够设置width,height
    //常用的块标签
    div,h1~h6,p,ul,li,dl,dt,dd

*  ##### 内联标签 #####

//特点
    1.并排显示
    2.不能设置width,height
    3.不能设置margin-top,margin-bottom
    a,span,em,strong

*  ##### 内联块 #####

//特点
    1.并排显示
    2.可以设置宽高
    //常用的内联块标签
    button,img,input

### 2.2 原理 ###

**块标签：独占一行,能够设置宽高**

`div,h1~h6,p,ul,li,dl,dt,dd`

display:block;

**内联标签**:并排显示,不能设置宽高,margin-top,margin-bottom

`a,span,em,strong`

display:inline-block

**内联块:并排显示,可以设置宽高**

`button,img,input`

display:inline-block

### 2.3 skill ###

#### a.如何让内联元素和内联块元素水平居中 ####

display:block;
    margin-left:auto;
    margin-right:auto;

#### b.如何让内联元素和内联块元素水平居中 ####

//给父级加
    text-align:center

# 3.`css`选择器 #

> ### 定义选定你所要改变的元素的一种方式。 ###

### 3.1分类 ###

<p class="test" id="first">hello world</p>
    <h4>标题</h4>

(1)css元素选择器
    p{color:pink}
    
    (2)class选择器
    .test{color:yellow}
    
    (3)id选择器
    #first{color:blue}
    
    (4)分组选择器
    p,h4{background:gray}
    
    (5)后代选择器
    div>span{} //选取div所有子元素为span的标签
    div span{} //选中div之后的所有span元素
    
    (6)兄弟选择器
    div+p{}选取紧邻div之后的第一个兄弟元素
    div~p{}选取紧邻div之后的所有兄弟元素
    
    (7)伪类选择器
    div:hover{}
    input:focus{}
    
    (8)伪元素-->用css自定义生成的元素
    
    ":before" 伪元素可以在元素的内容前面插入新内容
    p:before{
      content:''
    }
    ":after" 伪元素可以在元素的内容之后插入新内容。
    p:after{
     content:''
    }
    
    (9).属性选择
    div[class='test']{}

http://www.w3school.com.cn/cssref/css\_selectors.asp

### 3.2选择器的优先级别排序 ###

<div class='test' id='first'>hello world</div>

元素选择器<class选择器<ID选择器<!important
    div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}

### 3.3选择器的权重 ###

<div class="parent">
            <div class="child">child</div>
    </div>

/* 选择器嵌套的层次越深,那么权重越高 */
    .child{
       color:red;
    }
    .parent>.child{
       color:green;
    }

# 1.`css`基本样式 #

### 1.1背景 ###

背景颜色:background-color
    
    背景图片:backgorund-image
    
    背景重复:background-repeat
    
    背景吸附:background-attachment:fixed | scroll
    
    背景位置:background-position: x y 
    //第一个参数表示离x轴的距离,y表示离y轴的距离
    
    //简写
    background: color image repeat  position
    
    background-size
    //指定背景图片大小。
    
    background-size: x y;
    //x表示宽度，y表示高度
    
    background-size:cover;
    此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
    相当于background-size:100% 100%;

### 1.2文本 ###

color:设置字体的颜色 颜色是通过CSS最经常的指定： 十六进制值 - 如: ＃FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red body { color:red;}
    h1 { color:#00ff00;}
    h2 { color:rgb(255,0,0);}

### 1.3字体 ###

//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体 p{ font-family:Helvetica,Microsoft YaHei}

推荐使用`简书的`

font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;

font-size
    font-style:normal | italic
    font-weight:normal | bold | lighter
    
    行高
    line-height

### 1.4链接 ###

a:link - 正常，未访问过的链接
    a:visited - 用户已访问过的链接
    a:hover - 当用户鼠标放在链接上时
    a:active - 链接被点击的那一刻
    
    //*若单独设置几个链接，必须遵守如下规则：
    
    a:hover 必须跟在 a:link 和 a:visited后面
    a:active 必须跟在 a:hover后面

### 1.5列表(针对`ul`) ###

list-style:none;
    list-style-type:circle|square
    list-style-image:url("xxx")

### 1.6边框 ###

border-width 边框的宽度 border-style 边框的样式 border-color 边框的颜色 //可以简写成 border： width style color p{ border:1px solid #333}

//边框-单独设置各边 p
    { 
        border-top:1px solid #ccc;
     }

### 1.7表格 ###

border-collapse 
    //设置表格的边框被折叠成一个单一的边框
    table{border-collapse:collapse}

//可以在td,th设置这个两个属性
    colspan:value    //跨越的列
    rowspan:value   //跨越的行

### 1.8轮廓（了解） ###

//轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
    p{outline:1px solid pink}

### 1.9透明 ###

**opacity**

visibility:hidden|visible和display:none的区别

# 2.`css`样式的继承 #

**继承:是子元素对父元素的继承**

### 2.1`width`和`height` ###

*  width

如果子元素不设置宽度，默认情况下继承父元素的宽度

*  Height(特殊)

如果父元素不设置高度，默认情况下父元素继承子元素的高度

### 2.2`css`可以继承的属性 ###

//文本相关属性
    color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
    //字体相关属性
    font-family,font-style,font-size,font-weight,line-height
    //列表相关属性
    list-style
    //表格相关属性
    border-collapse
    //其他属性
    cursor,visibility