CSS看这篇就够了（超详细）

CSS(层叠样式表 Cascading Style Sheets)
作用：装饰html
书写位置：写在style中，或者通过link导入外部的样式<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >，写在标签上
引入方式：内嵌式（写在style内，作用于整个页面）、外联式（通过link引入，，作用于整个页面）、行内式（写在标签内部,，作用于当前标签）

标签选择器
标签选择器：通过标签名找到标签
只要页面中有符合的标签名，就可以被控制

类选择器
注意点：在类名前面加 .
谁拥有对应的类名，就可以被控制
特点1：类名可以有多个，彼此之间用空格隔开
特点2：同一个类名可以被多个标签使用
类名可以由数字，字母，下划线，中划线组成，不能以数字或中划线开头

id选择器：通过id名控制标签
注意点：在id名前面加 #
id名：相当于人的身份证号码啊，具有唯一性
id名每个标签只能有一个，而且不能重复

通配符选择器：一次性控制页面中所有的标签
注意点：*代表所有标签
实际开发过程中，性能不好,一般很少使用

字体样式属性
font-size：控制字体大小如30px
特点1：谷歌浏览器默认字体为16px
特点2：一般最小字体为12px
开发中一般都是用偶数字体大小

font-family: 控制字体库一般会准备多个字体，从左到右如"微软雅黑",Arial
如果所有字体都没有，则加载系统默认的字体
windows微软雅黑，macos苹果正方

font-weight: 控制字体的粗细、700 = bold 400 = normal、
控制字体的粗细数字：100-900的整百数单词：normal（正常），bold（加粗）

font-style: 控制字体是否倾斜如normal italic

复合属性
font: font-style font-weight font-size/line-height font-family 注意line-height不写默认为null 空，所以想要line-height要放到font后面不然被层叠性覆盖了
前两个位置可以调，不影响，后两个位置不可更改
font: bold italic 50px 楷体; 等同于 font: italic bold 50px 楷体;
前两个属性随便省略，后两个属性必须存在
font: 50px 楷体; 前两个默认normal normal

css样式属性具有层叠性：享用的属性，后来者居上，后面的属性覆盖前面的

text
color 文字颜色

text-align:left right center、控制文本的水平对齐方式只对行内元素和行内块元素有效
div盒子居中
margin：0 auto
文字垂直居中
line-height = 容器的高度
div元素如果不给宽度，默认与父元素一样宽

text-decoration: none underline overline line-through、控制文本的修饰效果下划线删除线上划线以及没有线

text-indent px em 、控制文本首行缩进

line-height 设置行高
行高属性永远写在字体连写属性(font)之后
清除文字之间的行间距
line-height：1；设置当前行高为字体大小

后代选择器如 .father .son
每个选择器名之间都用空格隔开

子代选择器如 .father>.son

并集选择器如 div, p,span
建议: 一个选择器名,单独一行

交集选择器如找到一个div标签带有类名box div.box

emmet语法是vscode自带的快捷语法
创建带有类名的div .类名
创建带有id名的div #id名
创建指定标签带有类名标签.类名
创建指定标签带有id 标签#id
创建带有嵌套结构（父子级别的）父元素>子元素
创建带有并列结构（兄弟级别的）元素1+元素2

伪类选择器
a
:link
:visited
:hover
:active

:focus针对表单元素表单元素获得焦点

块级元素 div p h ul ol th tr li 独占一行宽度父容器100%
行级元素（内联元素）a span strong b del s em i ins u一行多个宽高无效宽度就是自身宽度
行内块元素 img input td

background-color 背景色 rgb() 或者 #fff rgba(红,绿,蓝,透明度) #ff0000
设置背景为透明
background-color: rgba(0, 0, 0, 0);
background-color: transparent;

background-image url() 背景图片如background-image: url(./images/1.jpg);
默认情况下,背景图片会自动平铺,
背景图片是无法撑开盒子的宽高,必须手动设置宽高

background-repeat 背景平铺如no-repeat（不平铺）

background-attachment

background-position 背景位置以盒子的左上角为坐标原点,向下为正,向右为正水平: left center right、垂直: top center bottom

背景复合写法没有顺序要求
background color image repeat attachment position

块级元素显示模式
1. 独自占据一行
2. 可以设置宽高属性
3. 如果块级元素没有设置宽度,则宽度默认等于父元素

块级元素: div h1-h6 p table ul ol li等
块级元素默认: display: block

行内显示模式
1. 不能设置宽高, 宽高由内容撑开
2. 一行可以显示多个
行内元素: span a b u i s strong等
display: inline

行内块显示模式
1. 可以设置宽高
2. 一行显示多个
集合行内元素与块级元素的优点
行内块元素: input img
display: inline-block

1. 块级元素,几乎可以嵌套所有的元素
2. p标签, 不能包含其他的块级元素div,p,h1
3. a标签不能包含a标签 a标签可以放img（最好将a转为块级）

css三大特性
层叠继承优先级

层叠
如果相同的选择器,给标签设置多个相同属性,则后来者居上

继承性: 子元素可以继承父元素的部分属性
常见的可以继承的属性: color font系列 text-align line-height属性

优先级
继承<通配符<标签<类名<id<行内<!important
无穷大 !important
内联样式，权重值为 1000
ID选择器，权重值为 0100
类、伪类，权重值为 0010
标签选择器，权重为 0001
通配符，0000
!important必须写在属性后面，分号前面如color: blue !important;

特殊的a和h标签
1. a标签不继承颜色,必须直接给a标签设置 a默认蓝色
2. h系列标签,不继承文字大小 h有自己默认的font-size

补充：
在前端代码中,回车会被浏览器当成空格渲染
不管有多少个回车或者是空格,都只会被当成一个空格

padding
水平方向的padding,行内元素可以正常使用也就是padding-left 和 padding-right 有效
垂直方向的padding对行内元素没有效果也就是padding-top 和 padding-bottom 无效
margin
水平方向的margin,行内元素可以正常使用也就是margin-left 和 margin-right 有效
垂直方向的margin,对行内元素没有效果也就是margin-top 和 margin-bottom 无效

结构伪类
找到第一个子元素，并且为li标签
li:first-child {}
找到最后一个子元素，并且为li标签
li:last-child {}
找到第3个子元素，并且为li标签
li:nth-child(3) {}
找到所有li中的第8个li
li:nth-child(8) {}
找到li下标为偶数的，n从下标0开始
li:nth-child(2n) {} 等同于 li:nth-child(even) { }
找到li下标为奇数的，n从下标0开始 nth-child只能取到>=0的下标
li:nth-child(2n+1) { } 等于 li:nth-child(2n-1) { } 等于 li:nth-child(odd) { }

an必须写在b的前面，不能写成b+an的形式。
取前面6个li
li:nth-child(-n+6) { }
取5之后的li 可以取到5
li:nth-child(n+5) { }

.a:nth-child(3) 和 .a:nth-of-type(3)
前者是会把body下所有标签排序
找到body下第三个元素再去看是不是a标签，是的话匹配成功不是就匹配失败
后者是会把所有body下a标签排序
直接找到body下的第三个a标签找到就匹配成功找不到就匹配失败

伪元素
.father::before {
/* content是伪元素必加的属性 */
content: '我是一个伪元素';
}
伪元素中的文字是无法复制的.

浮动
float
浮动会使元素脱离标准流会变成类似inline-block（可以设置宽高可以在一行显示多个）
应用：文字环绕

浮动的特点:
1.浮动的元素，会脱离标准流，不占据标准流的位置
2.浮动找浮动，浮动元素会依次排列，由html结构顺序决定
3.浮动的元素会受到上边界的影响，如果上面有占据一行的块级元素，浮动元素是无法上去的
4.浮动的元素，显示特点会发生变化，类似于行内块：一行显示多个，可以设置宽高
浮动的注意点：
1.浮动属性是不会继承的，只能影响自身，对子元素是没有影响的
2.浮动元素本身是无法通过属性实现自动居中效果

浮动的影响: 当所有的子元素都浮动了,父元素将失去高度
浮动的影响,会影响到页面原本的布局效果!!!!
浮动的最初目的: 是实现文字环绕图片

img标签会自带一个底部的空隙

浮动的影响: 当所有的子元素都浮动了,脱离标准流,父元素就会失去高度
清除浮动影响的目的,让父元素重新拥有高度!!!!

清除浮动：
1. 直接给父元素设置高度（适用于父盒子有高度）
如果父元素的高度是动态变化的,那就不能使用

2. 额外标签法
在父元素中最后位置添加一个块级元素,设置clear:both
缺点: 在页面中添加毫无语义的标签,影响页面结构

3.单伪元素法
.father::after {
content: '';
clear: both;
display: block;
}

4.使用专门清除浮动的类名
.clearfix::after {
content: '';
display: block;
clear: both;
}

4.1: 单伪元素清除浮动方法的第二种写法
为了兼容低版本的浏览器
.clearfix::after {
content: '';
display: block;
clear: both;
/* 将元素隐藏 */
visibility: hidden;
/* 设置高度为0 */
height: 0;
}

4..2：双伪元素清除浮动
额外功能: 清除margin的塌陷问题
.clearfix::before,
.clearfix::after {
content: '';
display: block;
}

.clearfix::after {
clear: both;
}

定位
行级元素加了固定或者绝对定位后可以设置宽高了
块级元素加了固定或者绝对定位后不给宽高就是内容大小

静态定位: 是盒子的默认属性,也就是说静态定位其实就是标准流盒子
无法使用偏移属性来控制位置
我们常说的定位布局,指的是相对定位,绝对定位,固定定位
静态定位指的就是我们所说的标准流盒子

相对定位 relative
相对定位的元素,是参照自己原本的位置进行位移（最左上角）

绝对定位 absolute
如果父元素没有定位,则参照body浏览器页面进行位移
如果父元素有定位,则参照父元素进行位移
如果多个父元素都有定位,则参照最近的定位父元素（第一个不为position为relative或者absolute或者fixed的元素）

相对定位: 不会脱离标准流
对页面中其他结构没有影响

绝对定位: 会脱离标准流,不占据标准流的位置
对后面的结构是有影响的

定位做水平垂直居中
子绝父相
.father {
width: 800px;
height: 400px;
background-color: red;
margin: 0 auto;
position: relative;
}

.son {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
/* 口诀: 先走父容器一半,再往回走自己的一半 */
/* left: 50%; */
/* top: 50%; */

/* 注意: 如果想同时位移x和y轴的距离,使用translate属性值 */
/* transform: translate(x , y) */
transform: translate(-50%, -50%);

}
绝对定位固定定位都会脱标
z-index 在加了定位的元素上可以修改显示层级

vertical-align
用于行级元素

默认情况下,文字与图片是基线对齐
图片如果不设置vertical-align或者高度没有占满父盒子就会在图片下面有空白

1. 让多个input标签水平对齐
方式1: 设置垂直对齐方式,只要不是基线对齐

鼠标样式
cursor:pointer 手指
cursor:text 文本编辑
cursor:move 十字

圆角
border-radius
正方形设置圆：
border-radius设置为高度的一半
长方形设置圆角边框：
border-radius设置为高度的一半

overflow
超出父盒子的部分可见,默认值
overflow: visible;
超出隐藏
overflow: hidden;
设置滚动条, 不管内容有没有超出
overflow: scroll;
超出了之后自动设置滚动条
overflow: auto;

隐藏元素,并且不保留位置
display:none;
隐藏元素,但是位置还存在,类似隐身
visibility: hidden;

利用rgba控制背景半透明
只能控制背景颜色半透明

opacity控制整体的透明程度
1: 不透明
0: 完全透明

控制表格边框合并
border-collapse: collapse;
cellspacing:0 可以做到和上面一样的效果

链接伪类四个都写得话需要按照以下顺序
:link 未访问过
:visited 访问过
:hover 悬浮
:active 按住不松手

焦点伪类选择器
:focus

输入框的外边框 none可以去掉input外边框颜色
outline-color: red;

属性选择器
input[type="text"]

用边框画三角形
宽高设置为0,千万不要不写width
width: 0px;
height: 0px;
将不想要的三角形设置为透明
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid yellow;
border-left: 100px solid transparent;
简单写法
border: 100px solid transparent;
border-bottom-color: brown;

精灵图（雪碧图 sprite）
确定加载图片区域的大小宽高
设置背景图的负值位移
background: green url(./images/sprites.png) -239px -109px;

过渡
分组执行不同的时间
div {
width: 150px;
height: 150px;
background-color: red;
transition: width 3s, background-color 10s;
}

div:hover {
width: 500px;
background-color: green;
}

网站图片
方式1: 简单写法
<link rel="icon" href="./favicon.ico">

方式2: 详细写法
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

版心核心: 固定宽度,水平居中
单独准备一个版心哪里需要加到哪里

SEO
title
description
keywords

盒子模型 content padding margin border
border-width 边框宽度
border-style solid 实线、dashed 虚线、dotted点线
border-color 边框颜色
border复合属性没有顺序
border：width style color
cellspacing：0 == border-collapse：collapse 合并边框

padding在不给宽度的时候不会撑开盒子的宽度
padding的连写
只写一个值,控制四个方向
写了两个值,控制上下左右
三个值，控制上左右下
四个值，控制上右下左
给宽度 margin 0 auto 块级元素水平居中

盒模型
padding + border + margin + content
设置margin 会影响盒子的实际位置
盒子的实际大小
border + padding + content

box-sizing:content-box 标准盒模型：在div中设置padding或border会撑大盒子的实际宽度
box-sizing:border-box 怪异盒模型：在div中设置padding或border不会撑大盒子的实际宽度

css3版本新属性:box-sizing
自动內减模型
width/heigh写多少,盒子最终就是多少，不会撑大盒子的实际高度，加了padding或border会减小content

margin外边距
margin的连写
只写一个值,控制四个方向
写了两个值,控制上下左右
三个值，控制上左右下
四个值，控制上右下左

在水平方向上,margin是会叠加的
在垂直方向上,margin是会合并到一起的（解决不了,只能避免,不这么写,只设置一个盒子的margin，设置了两个的话取大的值如下）
.red {
background-color: red;
margin-left: 100px;
margin-bottom: 10px;
}
.green {
margin-left: 100px;
margin-top: 20px;
background-color: green;
}
以上会是生效margin-top: 20px;

如何解决margin塌陷问题
1.给父元素设置边框
border-top:1px solid black
2.给父元素设置上内边距
padding-top: 1px;
3.设置overflow:hidden,后面会讲
效果:让内部布局,不影响外部
overflow: hidden;

border-radius x-shadow y-shadow bulr spread color inset
text-shadow x-shadow y-shadow bulr color

display:hidden 不占位
visibility：hidden 占位

body高度：document.body.offsetHeight
可视窗口高度：document.documentElement.clientHeight
滚出页面的高度：document.body.offsetHeight - document.documentElement.clientHeight
最大的滚出页面的高度：document.documentElement.scrollTop

flex
flex-shrink计算公式

三个盒子
ul width 500px
display flex

li width 120px

li 1 flex-shrink:1
li 2 flex-shrink:1
li 3 flex-shrink:1
li 4 flex-shrink:2
li 5 flex-shrink:2

li总的需要600 但是只有500
超出100
每个li需要减去1/7 1/7 1/7 2/7 2/7 * 100的width

CSS看这篇就够了（超详细）相关推荐

学习javascript这一篇就够了超详细笔记（建议收藏）上
学习javascript这一篇就够了超详细笔记(建议收藏)上 1.初识计算机基础导读编程语言计算机基础初识js 浏览器执行 js组成 js初体验-三种书写位置 js注释 js输入输出语句 2. ...
Docker入门实战看这篇就够了(最新详细以及踩过的坑)
Docker入门实战看这篇就够了前言初识是什么容器与虚拟机能干什么去哪玩安装先决条件查看自己的内核安装所需的软件包(支持devicemapper存储类型) 设置镜像的仓库设置yu ...
QT入门看这一篇就够了——超详细讲解（40000多字详细讲解，涵盖qt大量知识）
目录一.Qt概述 1.1 什么是Qt 1.2 Qt的发展史 1.3 Qt的优势 1.4 Qt版本 1.5 成功案例二.创建Qt项目 2.1 使用向导创建 2.2 一个最简单的Qt应用程序 2.2. ...
SpringBoot+Linux操作系统与项目部署(这一篇就够了|超详细）
[个人向]超快速了解微信小程序:看这篇就够了!(注册、语言、框架、配额等简要说明)
[个人向]超快速了解微信小程序看这篇就够了+相关简要说明本文精炼微信小程序开发文档相关内容,旨在对初次接触并准备开发小程序的童鞋(比如自己)提供一个快速了解攻略.其中包括注册相关.语言.框架模式.相 ...
【超全汇总】学习数据结构与算法，计算机基础知识，看这篇就够了【ZT帅地】2020-3-7
https://blog.csdn.net/m0_37907797/article/details/104029002 由于文章有点多,并且发的文章也不是一个系列一个系列发的,不过我的文章大部分都是围 ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
学习 HTML+CSS 这一篇就够了
文章目录学习 HTML+CSS 这一篇就够了 ! HTML 简介一.网页 1 .什么是网页 2. 什么是 HTML 3.网页的形成 4.网页总结二.浏览器 1. 常用浏览器 2.浏览器内核三. ...
一文详解JavaBean 看这篇就够了
一文详解JavaBean 看这篇就够了 JavaBean的历史渊源 JavaBean的定义(通俗版) JavaBean应用 < jsp:useBean > < jsp:getProp ...

CSS看这篇就够了（超详细）

CSS看这篇就够了（超详细）相关推荐

最新文章

热门文章