css常用知识点总结

网页

1.网页的构成

示例图片.jpg

html：超文本标记语言，是使用标记标签来描述网页的一种语言；
css：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言
java script：是一种轻量级的编程语言

2.网页、网站

一个html文件就是一个网页。（书中的每一页）

网站是什么？有很多个网页可以组成一个网站，（书）

3.常用的浏览器

浏览器.png

谷歌浏览器(chrome):Webkit内核(v8引擎)，现在是blink
火狐浏览器(firefox):Gecko内核
IE浏览器:Trident内核
欧朋浏览器(opera):Presto内核
safari、大部分国产浏览器(360、搜狗、QQ、UC、猎豹、百度…)、安卓和IOS大部分手机浏览器…都跟谷歌浏览器一样

HTML

1.快速新建一个html文件

新建一个文件，html后缀名： .html或.htm
在英文输入法状态下按！（回车或tab）

2.html的字符库

www.w3school.com.cn/html/html_e…

实体字符.png

3.html 的基本结构

文档声明

帮助浏览器正确地显示网页 ;
定义这个文档的类型；
不区分大小写；
必须放在第一行(因为浏览器是从上到下解析的)
必须写文档声明，如果不写就会发生怪异事件；
不是一个标签，它只是一个声明；

<!DOCTYPE html>  //文档声明，告知浏览器此文档所使用的规范，如果不写就是怪异模式
<html lang="en">  //语言类型，lang=“en”代表的是英文，在浏览器中打开，会提示是否翻译成中文 lang=“zh-CN”或者不写代表的是中文
<head>
//字符编码：万国码
<meta charset="UTF-8"/> 
<meta name="keywords" content="关键字" />
<meta name="description" content="描述的文字">
//显示网页标题
<title>html的基本结构</title>
</head>
<body>
可视部分
</body>
</html>
复制代码

4.HTML标签语义化

含义：合理的标签做合理的事情

为什么要遵循标签语义化？

利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
在样式丢失的时候，还是可以比较好的呈现结构；
更好的支持各种终端，例如无障碍阅读和有声小说等；
利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；

日常工作中怎样遵循标签语义化

尽量减少使用无意义标签，例如span和div；
尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；
在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
列表搭建时，使用无序列表，有序列表，自定义列表；

href：跳转的网址
- 回到顶部：href=””;
- 重新加载：href=””;
- 禁止跳转：href=”javascript:;”
- 锚点跳转：点击某个链接文字，想要跳转到相应的模块，给每一个模块用id起一个名字，a标签里面的href的值应该是# +id名
targrt：
- self：在当前窗口打开
- title：在新窗口打开

<a href="">回到顶部</a>
  <a href="">刷新文件</a>
  <a href="">支付</a>
  <a href="http://www.baidu.com" target="_black">百度black</a>
  <a href="http://www.baidu.com" target="_self">百度self</a>
复制代码

案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
        div{
            /* 高度这个值和 行高一样的话，就会垂直居中*/
            height:500px;
            line-height: 500px;
            background:darkturquoise;
            margin-bottom:20px;
            /* 文字水平居中 */
            text-align: center;
        }
</style>
</head>
<body>
<div id="goods1">好店直播</div>
<div id="goods2">品质特色</div>
<div id="goods3">实惠热卖</div>
<div id="goods4">猜你喜欢</div>
<a href="">好店直播</a>
<a href="">品质特色</a>
<a href="">实惠热卖</a>
<a href="">猜你喜欢</a>
<a href="">回到顶部</a>
</body>
</html>
复制代码

img 图片

src：图片地址
alt：当图片加载失败时，在图片旁边会出现替代文字
title：当鼠标滑上图片时，会出现跟随文字

易烊千玺
（啦啦啦~放上爱豆的图片镇楼）

大盒子标签

<!-- 大盒子 -->
 <div>大盒子</div>
复制代码

span 小盒子标签

<!-- 小盒子 -->
 <span>小盒子</span>
复制代码

格式化

strong/b 加粗
i/em 斜体
del 删除线
small
big

<!-- 格式化标签：标签自带一定的样式 -->
    <!-- 斜体 -->
    <i>haha</i>
    <em>haha</em>
    <!-- 加粗 -->
    <b>加粗</b>
    <strong>加粗</strong>
    <!-- 删除线 -->
    <del>删除线</del>
    <s>删除线</s>
    <!-- 下划线 -->
    <u>下划线</u>
    <ins>下划线</ins>
    <!-- 增大字号 -->
    <big>增大字号</big>
    <!-- 减小字号 -->
    <small>减小字号</small>
复制代码

预格式化 :pre

会按照预先设置好的格式，在浏览器中显示，即编辑区写的就怎么在页面显示

 <pre>
        ***123 ***
        ()123()
        []123
  </pre>
复制代码

列表

无序列表 ul li

<!-- 无序列表 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
复制代码

有序列表 ol li

 <!-- 有序列表 -->
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
复制代码

自定义列表 dl dt dd

dl、dt、dd。dl里面紧邻着的只能是dt或者dd，但是在dt或者是dd里面还可以写其它的标签。

 <h3>一日三餐</h3>
<dl>
<dt>早餐</dt>
<dd>豆浆</dd>
<dd>包子</dd>
<dt>午餐</dt>
<dd>盖饭</dd>
<dd>鸡蛋面</dd>
<dt>晚餐</dt>
<dd>小龙虾</dd>
<dd>饮料</dd>
</dl>
复制代码

table 表格

caption 表格的标题
tr 每一行
td 每一个单元格
th 表头
thead 表头
tbody 主体
tfoot 页脚
label 为 input 元素定义标注（标记）

<table border="1">
<caption>成绩表</caption>
<thead>
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分：</td>
<td>总分：</td>
<td>总分：</td>
</tr>
</tfoot>
</table>
复制代码

input

type类型
- text 文本输入框
- password 密码
- button（value=“支付”）
- submit 提交
- reset 重置
- radio 单选
- checkbox 多选

<form action="">
        <!-- 文本输入框  -->
        <input type="text" placeholder="请输入用户名" autofocus>
        <!-- 密码输入框 -->
        <input type="password" placeholder="请输入密码" required>
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 提交 -->
        <input type="submit">
        <!-- 按钮 -->
        <input type="button" value="支付">
        <button>按钮</button>
        <!-- 单选按钮 -->
        <input type="radio" checked>
        <!-- 多选按钮 -->
        <input type="checkbox" checked disabled>
</form>
复制代码

单选功能的实现

把要实现单选功能的一组表单，添加一个相同的name值

男 <input name="sex" type="radio">  女 <input type="radio"  name="sex">
复制代码

文字关联功能

用label 标签把文字包括起来，让里面的for属性值和表单上面id名字值一致即可

<label for="man">男</label> <input id="man" name="sex" type="radio">
<label for="woman">女</label> <input id="woman" type="radio"  name="sex">
复制代码

button 按钮

<!-- 按钮 -->
 <button>按钮</button>
复制代码

textarea 文本域

cols：列 rows：行
禁止重置尺寸：resize: none
去除点击时候出现的蓝色基线：outline: none;

 <textarea name="" id="" cols="50" rows="10"> </textarea>
复制代码

select 下拉框

option：代表里面的每一项
selected:默认选中
disabled:禁止选中

 <select name="" id="">
            <option value="" disabled>请选择你来自哪</option>
            <option value="">上海</option>
            <option value="" selected>北京</option>
            <option value="">河南</option>
        </select>
复制代码

form 代表一个 HTML 表单

h5新增的标签

video 视频
audio 音频
header 头部
footer 底部
main 主要内容区
aside 侧边栏
section 区分大模块
nav 导航栏
figure figcaption 配图配图说明
article 文章
input
- type
  - number 数字
  - tel 电话
  - search 搜索
  - email 邮件
  - color 颜色
  - range 范围
  - file 上传文件
  - date 日期

<!--数字-->
<input type="number">
<!--搜索-->
<input type="search">
<!--电话-->
<input type="tel">
<!--颜色-->
<input type="color" >
<!--范围-->
<input type="range">
<!--上传文件-->
<input type="file">
<!--日期-->
<input type="date">
<!--邮件-->
<input type="email">
复制代码

标签的特征

关键词（标签）由尖括号括起来
一般都是成对出现（开始标签、结束标签）
结束标签比开始标签多了一个/

还有一类比较特殊的，是单个出现的，比如：img，meta，input就叫做“单标签”，“自闭合标签”，“空标签”

标签的属性

标签的属性：用来描述某个特征和功能的，通常放在关键词后面。可以分为内置属性和自定义属性

表现形式：

属性总是以名称/值对的形式出现，比如：name=”value”。（键值对）
属性和属性之间至少要有一个空格
属性是没有先后顺序的

以下的例子里：src，alt就是 “属性名” 网址，小破孩是 “属性值”。

<img src="http://a.com" alt="小破孩">
复制代码

标签的划分

标签的划分.png

块级元素
- 独占一行
- 可以设置宽和高
- 排列方式：从上到下
行内块
- 可以共占一行
- 设置宽和高起作用
- 排列方式：从左到右
行内元素
- 可以共占一行
- 写宽高不起作用
- 排列方式从左到右

布局

浮动

脱离文档流
浮动的方向是参照它父级
宽度本来是可继承的，但是浮动的元素宽度是本身内容的大小
行内元素一旦浮动，设置宽、高也起作用

浮动产生的问题(父级的高度塌陷)

给父级加高度
给父级加overflow：hidden；
给父级盒子的末尾添加div，给这个div盒子设置样式clear：both
直接给浮动元素的父级增加类名clearfix（保证css 里面有这个代码）

定位

静态定位 static
相对定位 relative （相对自身）
绝对定位 absolute （相对其他元素，参照物有规则）
- z-index 调层级的，这个值越大，就会在最上面，值最小的在最下面。
固定定位 fixed （相对窗口）

flex布局：兼容性问题，ie10以上才支持

display：flex/inline-flex;
“容器” “项目” 两个轴
容器的属性
- flex-direction 设置主轴的方向
- flex-wrap 换行
- flex-flow flex-direction属性和flex-wrap属性的简写形式
- justify-content 项目主轴对齐方式
- align-items 项目在侧轴上的对齐方式
- align-content 多根轴线时项目在侧轴上的对齐方式结合flex-wrap：wrap
项目上的属性
- order：顺序，值越小越靠前
- flex-grow 项目的放大比例
- flex-shrink 项目的缩小比例
- flex-basis 在分配多余空间之前，项目占据的主轴空间
- flex： flex-grow flex-shrink flex-basis的简写
- align-self 允许单个项目有与其他项目不一样的对齐方式

页面样式

清除默认的样式

默认自带的margin值和padding值都归为0.

*是通配符选择器，代表选中页面中所有的元素，下面代码的意思就是，把页面中所有元素默认自带的margin值和padding值都归为0.

*{
margin:0;
padding:0;
}
复制代码

清除列表前面默认的样式

ul,ol{
list-style: none;
}
复制代码

清除a标签下划线

a{
text-decoration: none;
}
复制代码

文字

文字缩进：text-indent

text-indent后面可以跟具体的像素值，也可以跟em，如果是2em的时候代表缩进2个字的距离

<style>
    p{
        /* text-indent: 10px; */
        text-indent:2em;        
    }
</style>
复制代码

文字大小：font-size

p{
font-size:26px;
}
复制代码

文字颜色：color

文字字体：font-family

如果是中文字体，或者是英文字体由多个单词组成需要加单引号或者双引号

font-family:"宋体","Times New Roman",Georgia,Serif;
复制代码

控制文字粗细：font-weight

400 正常粗细===normal
700 ===bold
900 ===bolder

如果用了b、strong，不想让文字加粗，font-weight：normal(400);

<style>
    p{
        font-weight: bold;
    }
    b{  
        font-weight: normal;
    }
</style>
复制代码

控制文字倾斜 :font-style

font-style:italic; 让文字倾斜
font-style:normal; 让文字正常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     span{
         font-style: italic;
     }
     i{
         font-style:normal;
     }
    </style>
</head>
<body>
    <span>span</span>
    <i>斜体</i>
</body>
</html>
复制代码

字母和单词之间的间隙

letter-spacing—–是字母之间的间隙
word-spacing——是单词之间的间隙

p{
   word-spacing: 20px;
    }
<p>你 们 真 的 很 棒！</p>   
<div>You are really great!</div>
复制代码

注意：对于汉字来说，如果要想用word-spacing，必须文字和文字之间有一定的间隙，代表他们是独立的单词，不然word-spacing 不起作用。

单行显示

<style>
     p{
         width:100px;
         border:1px solid green;
         /* 超出隐藏 */
         overflow: hidden;
         /* 文字隐藏的方式是... */
         text-overflow: ellipsis; 
         /* 不换行 */
         white-space: nowrap;
     }
</style>
复制代码

多行显示

p{
width:100px;
border:1px solid green;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 控制让哪一行显示... */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
复制代码

禁止用户选中文字

body{user-select: none;}
复制代码

背景

background-color：背景颜色

background-image:url(“图片的路径”)

background-position：背景图片的位置

水平方向：left、center、right；
垂直方向：top、center、bottom
具体的像素值：background-position:50px 50px;
百分比：background-position: 100% 100%；

background-repeat:(控制图片是否平铺，以及平铺的方向)

no-repeat：不平铺
repeat-x ：水平方向平铺
repeat-y:垂直方向平铺

background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。

fixed
scroll （默认）

background-size:x y；控制背景图片的大小；

x代表的背景图片的宽，y代表的是背景图片高

具体的像素值：background-size:100px 100px;
百分比：background-size:100% 100%;
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。可能造成背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（背景图片放大的时候，只要宽度或者高度，一边铺满了容器，就停止放大。）

居中

让块级元素水平居中：margin:0 auto;

div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
复制代码

让文字垂直居中

height的值和line-height的值相等

li{
height:35px;
line-height:35px;
}
复制代码

让一个元素在整个屏幕或者是一个盒子中水平垂直居中

固定定位或者绝对定位；
- left：50%；top：50%；
- margin-left：负的盒子宽的一半；margin-top:负的盒子高度的一半;

<style>
.box{
        width:200px;
        height:200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
</style>
复制代码

特殊颜色设置

线性渐变（Linear Gradients）

1.默认是从上到下

.box{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}
复制代码

2、从一个方向到另一个方向（left 、right 、bottom、top）

下面的例子就是从左到右

background:linear-gradient(left,red,green);
background:-webkit-linear-gradient(left,red,green); 
复制代码

3、对角的，两个方向可以进行组合

比如下面的就是从左上角到右下角

background:linear-gradient(left top,red,green);
background:-webkit-linear-gradient(left top,red,green);
复制代码

4、还可以是角度

background:linear-gradient(90deg,red,green);
background:-webkit-linear-gradient(90deg,red,green);
复制代码

径向渐变：默认的形状是椭圆，至少得有两个颜色值。

形状：ellipse 椭圆（默认），circle（圆）

.box{
        width:400px;
        height:600px;
        margin:0 auto;
        background:radial-gradient(circle,red,green);
        background:-webkit-gradient(circle,red,green);
    }
复制代码

透明度

.opacity{
filter:alpha(opacity=50); /* IE */

opacity: 0.5; /* 支持opacity的浏览器*/
}
复制代码

高斯模糊

<style>
      img{
          filter: blur(50px);
      }
</style>
复制代码

选择器

选择器.png

通配符选择器

通配符选择器：代表选中所有的元素
符号：*
权重：0

*{
margin: 0; 
padding: 0;
}
复制代码

标签选择器

代表的意思：选中这一类的标签
符号：标签
权重：1

//所有的p标签颜色都是红色
p {color: red;}
复制代码

类选择器

符号：.
权重：10
特点：类名可以重复使用，名字可以起多个，中间用空格隔开

.abc{ color: yellow;}
复制代码

属性选择器

符号：自己起的类名
权重：10

1.选中具有某个属性的所有元素

[index] {color: tomato;}
复制代码

2.选中属性名等于特定属性值的一类元素

[index="a"] {color: teal;}`
复制代码

id选择器

符号：#
权重：100

注意：在一个文档中，id名字不能重复（相当于身份证，不能重复）但id和class名可以重复

<style>
 #box1{background:tomato;}
</style>
 <div id="box1" >div</div>
复制代码

子选择器

符号:>（权重0）
权重：组合的选择器权重之和
作用：选中子元素第一层级的儿子元素

.main>span {
           color: thistle;
        }
        /* 以上例子权重为11 */        
    <div class="main">
        <div>
            <div>
                <span>111</span>
            </div>
        </div>
        <span>span1</span>
    </div>

复制代码

后代选择器

符号：空格
权重：组合的选择器权重之和
作用：把特定的后代（不管是儿子还是孙子，曾孙子…都是后代）元素选中

.main div {
            color: red;
         }
 <div class="main">
        <div>
            <div>
                <span>111</span>
            </div>
        </div>
        <div>span1</div>
    </div>
复制代码

分组选择器

符号：，
权重：组合的选择器权重之和
作用：可以把共同的代码提取出来

.box1,
    .box2 {
      background-color: violet;
    }
 <div class="box1">div1</div>
 <p class="box2">p</p>
复制代码

例如：.box1 span, .box2 {background-color: violet;}
此时.box1 span的权重就是11

交集选择器

符号：没有
权重：组合的选择器之和
特点：由多个选择器组成

<style>
    .box1.current{
        background:green;
    }
</style>
<div class="box1 current" >box1</div>
<div class="box1">box1</div>
<p class="current">p1</p>
复制代码

相邻兄弟选择器

符号:+
权重：组合的选择器权重之和
作用：选中与某个元素相邻的元素

注意：向下寻找，下面代码中第一个p标签并不能被选中

<style>
      h1+p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p
复制代码

通用兄弟选择器

连接符号:~
权重：组合的选择器权重之和
作用：选中某个元素的兄弟元素（不用相邻，只要是兄弟就可以）

注意：向下寻找，下面代码中第一个p标签并不能被选中

<style>
      h1~p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

复制代码

伪类选择器

a标签的四种状态，有一定的顺序，l v h a在网络上被称为“爱恨原则”

<style>
        a{
            font-weight: bold;
            font-size:100px;
        }
        /* 默认链接的文字颜色 */
       a:link{
           color:green;
       }
       /* 访问过后的文字颜色 */
       a:visited{
           color:gold;
       }
       /* 鼠标滑上 */
       a:hover{
           color:hotpink;
       }
       /* 点击链接时候的 */
       a:active{
           color:darkcyan;
       }
</style>
复制代码

css3选择器

nth-child 这个代表的是选中所有儿子元素中的第几个
nth-of-type 是选中儿子元素中特定类型中的第几个

路径

绝对路径：在主页上的文件或目录在硬盘上真正的路径(URL和物理路径)

C:\xyz\test.txt 代表了test.txt文件的绝对路径
www.sun.com/index.htm也代…

相对路径：相对与某个基准目录的路径

同级目录：直接写名字或者./
下一级目录：用“/”表示同时/也表示根目录
上一级目录：”../” 一个../ 代表回到上一级目录，两个“../”代表回到上两级目录

css引入的四种方式

行内式

<div style="color:deeppink;">都很棒！</div>
复制代码

内嵌式：在head里面通过style标签来写

<style>
        div,p{
            width:500px;
            height:200px;
            background:greenyellow;
            color:hotpink;
        }
</style>
复制代码

外链式，在head里面通过link标签把样式表给链接过来

<link rel="stylesheet" href="https://juejin.cn/post/index.css">
复制代码

导入式

<style>
        @import "index.css"
</style>
复制代码

css的三大特性

继承性：给某个元素设置了一个样式，它后代的元素也能继承这些样式

可继承的属性：以color/font/text/line开头的属性
元素可见性：visibility
普通文档流的宽度

层叠性：对同一个元素，同一个属性设置了不同的值，css处理这种冲突的能力

如果权重相同，就看css的编码顺序，后面的代码会覆盖前面的
如果权重不同，谁的权重大，听谁的

优先级（权重）

权重顺序：！important(强制执行)>内联样式>id>类>标签>通配符>继承>浏览器默认

注意：尽量少用！important 和内联样式

盒模型

盒模型是一种写网页的思维模式，每一个元素都可以看成一个盒子

盒模型的组成部分

margin与padding.png

content：主要内容区域
padding：元素盒子与内容直接的内填充
border：元素盒子的边框
margin：元素与元素之间的距离

盒模型计算总盒子大小

总盒子高度=content的高度+padding（上下）+border（上下）
总盒子宽度=content的宽度+padding（左右）+border（左右）

盒模型相关属性

width宽度

min-width 最小宽度
max-width 最大宽度

height高度

min-height 最小高度
max-height 最大高度

padding内填充

padding的方向

上padding：padding-top
下padding：padding-bottom
左padding：padding-left
右padding：padding-right

padding的顺序

<style>
      span{
          background:green;
          /*  上、右、下、左 顺时针方向 */
          /* padding:10px 50px 100px 200px; */
          /* 上、左右、下 */
          /* padding:10px 50px 100px; */
          /* 上下、左右 */
          /* padding:10px 50px; */
          /* 四个方向都是一样的padding：50px */
          padding:50px;
          display:inline-block;
          border:5px solid gold;
      }
</style>
复制代码

margin

离左边的距离：margin-left
离左右边的距离：margin-right
离上边的距离：margin-top
离下边的距离：margin-bottom

border边框

边框的宽度：border-width

边框的宽度.png

指定边框的样式：border-style

边框样式.png

边框的颜色：border-color

border 复合属性
div{
   border:1px solid green;
}
复制代码

border-radius:50%

.box{
        width:300px;
        height:300px;
        background:gold;
        border-radius: 50%;
    }
 
复制代码

精灵图

在做项目的时候，为了优化，减少http请求，会把多张图片合并到一张图片上面，这种图就是“精灵图”，也称“雪碧图”。(只针对小图)
精灵图的原理：通过改变background-position。
在写精灵图的时候，background-position的x轴，y轴的值一定的负的

盒模型的分类

标准盒模型（默认的）：box-sizing: content-box;

标准盒模型.png
在标准盒模型下：代码中所写的width 和高度指的是盒模型中content部分的宽和高

ie盒模型：box-sizing: border-box;

IE盒模型.png
在ie盒模型下：代码中所写的width和高指的是总盒子的宽和高，如果用到了padding和border，浏览器会自动的减去，计算出来content部分
面试题 margin值穿透

margin值合并的问题

display

display常用的几个值

inline ：转换成行内元素（一般不用，如果需要直接用行内元素即可）
block：转换成块级元素
inline-block: 转换成行内块
none：消失

想让两个块级元素在一行显示，转换为行内块产生的问题

两个块级元素之间会有缝隙（原因回车造成的）

解决的办法

在结构中消除换行符
给他们的父级设置font-size:0;如果里面的子元素需要设置文字大小，再单独设置即可。

如果一个里面设置文字，另一个没有设置，默认是基线对齐，会产生下掉的情况。

基线对齐.png

/* 顶线对齐 */
vertical-align: top;
/* 中线对齐 */
vertical-align: middle;
/* 底线对齐 */
vertical-align: bottom;
/* 默认基线对齐 */
vertical-align: baseline;
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Cisco WebEx Node for MCS和WebEx Meetings Server HTTP实现安全漏洞

【计算机视觉处理5】阈值处理

短信转发助手 v7.0.1 智能短信群发助手 安卓高级版

FormMail CGI程序漏洞

WordPress SocialFit插件‘msg’参数跨站脚本漏洞

使用lombok 实现链式编程

css常用知识点总结

css常用知识点总结

网页

1.网页的构成

2.网页、网站

3.常用的浏览器

HTML

1.快速新建一个html文件

2.html的字符库

3.html 的基本结构

4.HTML标签语义化

为什么要遵循标签语义化？

日常工作中怎样遵循标签语义化

标签

标签汇总

p 标签

h1-h6标题标签

a 超链接

img 图片

大盒子标签

span 小盒子标签

格式化

预格式化 :pre

列表

table 表格

input

单选功能的实现

文字关联功能

button 按钮

textarea 文本域

select 下拉框

form 代表一个 HTML 表单

h5新增的标签

标签的特征

标签的属性

标签的划分

布局

浮动

浮动产生的问题(父级的高度塌陷)

定位

flex布局：兼容性问题，ie10以上才支持

页面样式

清除默认的样式

默认自带的margin值和padding值都归为0.

清除列表前面默认的样式

清除a标签下划线

文字

文字缩进：text-indent

文字大小：font-size

文字颜色：color

文字字体：font-family

控制文字粗细：font-weight

控制文字倾斜 :font-style

字母和单词之间的间隙

单行显示

多行显示

禁止用户选中文字

背景

background-color：背景颜色

background-image:url(“图片的路径”)

background-position：背景图片的位置

background-repeat:(控制图片是否平铺，以及平铺的方向)

background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。

background-size:x y；控制背景图片的大小；

居中

让块级元素水平居中：margin:0 auto;

让文字垂直居中

让一个元素在整个屏幕或者是一个盒子中水平垂直居中

特殊颜色设置

线性渐变（Linear Gradients）

1.默认是从上到下

2、从一个方向到另一个方向（left 、right 、bottom、top）

3、对角的，两个方向可以进行组合

4、还可以是角度

短信转发助手 v7.0.1 智能短信群发助手安卓高级版