CSS
网页的布局和外观的显示样式
没有一张图解决不了的事：https://www.processon.com/mindmap/5e368a8be4b0d27af184e118
选择器
* 通配符选择器
复合选择器
后代选择器
.nav a {
}
.riven ul li {
}
子元素选择器
不是子子孙孙，只找儿子
div>strong{
}
并集选择器(集体声明)
p和span同时选择
p,
span {
}
交集选择器
既是p 标签 又是 .red 类选择器
p.red{
}
伪类选择器
链接伪类：
a:link 未访问的连接。
a:visited 已经访问的连接。
a:hover 鼠标移动到连接上。
a:active 选定的连接。
字体 fon-family
fon-family:'宋体'
中文字体记得加双引号
中文字体必须用 \588B \4F53 加双引号
字体粗细font-weight
font-weight: bold normal 700 400
可以修改 h1标签
css中文手册
字体风格 font-style
font-style:intalic normal
文本对齐text_align
text-align: left right center
行高行间距line-height:
line-height:24px;
首行空四个空格text-indent
text-indent:2em 25px
文本的装饰(去除下划线)
text-decoration:none underline line-through overline
color属性用来自定义文本颜色
SFC 吸取颜色
名字定义
16进制 #
RGB
块级元素
h1 p dvi ul ol li
宽度，高度，内边距，外边距 都能控制
div 是一个盒子 可以设置 长 宽 里面放啥都行
注意
p 标签不能放div
h1 dt 文字类的标签只能放文字 不能放其他块级元素
行内元素
a strong b em i del s ins u span
span
一行可以显示多个
高宽没有用 默认文字一样
行内元素 只能包含文本 或者 其他 行内元素 a 不能包a
行内块元素
img input td
可以对它可以设置 宽 高 外边距 宽边距
标签的转换
把行内元素转换成块级元素
display：block
把块级元素转换成行内元素
display：inline
都可以转换成行内块标签
a{
display:inline-block
}
行高和垂直居中
行高的测量方法
顶线----------
中线 --------
基线 --------
底线 --------
上一行的基线和下一行的基线 称为行高
单行文本垂直居中
行高 = 上距离+内容高度+下距离
line-height:50
结论
行高 = 高度 文字会垂直居中
行高 > 高度 文字会垂直居中
行高 < 高度 文字会偏上
行高 === line-height ： 文字居中
背景
背景颜色
background-colro：pink；
背景图片
bacground-image:url(路径);
默认为 none
背景平铺
background-repeat:repeat
no-repeat
repeat-x
repeat-y
背景位置
必须要有背景图片(以下两个值可以混用)
background-position:length 10px 50px
background-position:position top center bottom left center right
实例 右上角
right top
背景附着
background-attachment:scroll | fixed
背景简写
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: #cc url() no-repeat fixed venter top
背景半透明
background:rgba(0,0,0, 0.3)
取值是 0-1之间
背景尺寸自动伸缩
CSS三大特性
层叠性：
出现了两个div 两个color
样式冲突的话 后面的样色会层叠 前面的样式，样式不冲突不会层叠。
继承性
子标签 会 继承 父标签的一些元素 （text font line color）
优先级
由低到高
标签
类
id
行内
强制优先 ！important 其他都是浮云
权重叠加
继承的权力为零
* 和 继承的权力为零
如果 权力相同就是 就近原则
网页布局的本质： 先建立一个盒子，或者在盒子里面再建立一个盒子，然后往盒子里面丢内容就行了
盒子边框border
border-style dotted dashed solid
border-color
border-width：5px
圆角边框
圆形的话：
barder-radius:50%;
矩形的话：
给高度的一半
简写
border：5px solid pink
指定单独边框
border-top：宽度 样式
各类边框可以有不同颜色
可以修改 input 中的边框
在表格中border-collapse:collapse; 合并相邻的边框 1+1 = 1
内边距（padding）
控制 内容和边框中的距离
padding-right left top botton
会影响盒子会变大的问题？
解决，改变内容宽度
如果这个子盒子 没有宽度 则pading 不会撑开盒子。 如果给了 就会撑开盒子
外边距（margin）
margin-left：100px right top button
简写：和padding一样
块级盒子水平居中
1.盒子必须指定宽度
2.然后给 左右外边距设置为auto
margin-left:auto
margin-right:auto
插入图片和背景图片的区别
1.移动位置的方式不一样
img 可以用margin，pading
background 使用background-position：0，0 移动 ， 一般用来做小图标和超大背景
相邻块元素垂直上下外边距合并问题
取较大的值，尽量给一个盒子添加margin值。
嵌套块元素垂直外边距的合并（塌陷）
当嵌套中 子元素 指定上marging时会出现，连带父元素移动
1. 给父元素添加一个border transparent（透明）
1.可以给父级 指定一个上 padding-top：1px
3.overflow：hidden
list-style：none ===== 取消列表的头样式
盒子阴影
box-shadown:
推荐
box-shadow:0 15px 30px rgba(0,0,0,.3)
浮动（float）
网页布局的核心就是用css来摆放盒子
普通流 ： 累积盒子。自上而下 就用块级。 从左到右就用行内
浮动流：
div能排成一列
实现盒子左右对齐
文字环绕图片
定位：
浮动口诀一--浮
浮到上方（脱离标准流）
浮动口诀一--漏
后面的文档 将浮动起来的文档 占有了
浮动口诀一--特
浮动特性 = float 属性会改变display属性。 转换为行内快，但没有缝隙
注意： 浮动是脱离标准流的 所以我们 要给浮动的元素添加一个标准流的父亲。
如果父元素有 border和pading值 子元素不会压住父元素，不会超过父元素的边框，也不会超过父盒子的内边距。
清除浮动
主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
标准流不会影响页面布局
有时候父盒子不方便给高度,让子盒子有多少内容就显示多少内容。自动撑开父亲。父盒子不需要给高度
浮动流会影响页面布局
因为 大毛 二毛 浮动了，不占有位置，而父级又没有高度，所以two就到底下去了。
方法
clear：left right both
1. 额外标签法（隔墙法）
在最后一个浮动的元素后面添加一个新的空标签div 。 然后 clear： both
多余的标签
2.父级添加overflow属性方法 overflow：hidden | auto | scroll
给父元素添加一个 overflow：hidden
内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。
3.使用after伪元素清除浮动
.clearfix:after { content:""; display:block; height:0; visibility:hidden;
clear:both }
IE6 IE7 所使用的清除浮动
.clearfix {
*zoom:1
}
4. 使用双伪元素清除浮动
.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } IE6 IE7 所使用的清除浮动 .clearfix { *zoom:1 }
css属性书写顺序
布局流程
页面制作
定义版心 单独写一个类 后面直接调用就可以了；
/* 版心 1200 水平居中 */ .w { width: 1200; margin: auto; }
所有需要配置的项(css 初始化代码)
* { margin: 0px; padding: 0px; } /* 清除列表样式 */ li { list-style: none; }
整个网页底色
body { background-color: #f3f5f7; }
头部制作
头部代码
html
<!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>学成网在线</title>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<!-- header头部模块 -->
<div class="header w">
<!-- logo -->
<div class="logo">
<img src="./image/images/logo.png" alt="">
</div>
<!-- nav -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- search -->
<div class="search">
<input type="text" value="请输入关键词">
<button></button>
</div>
<!-- user -->
<div class="user">
<img src="./image/images/user.png" alt="">
Mark
</div>
</div>
<!-- header头部模块结束 -->
</body>
</html>