CSS
- 一.CSS和HTML的四种结合方式
- style属性
<div style="color:green;"> - <style type="text/css">CSS代码</style>（写在head标签里面）
<style type="text/css"> div { color: red; } </style> - <style type="text/css">@import url(div.css)</style>----某些浏览器下不起作用
- 使用头标签link引入外部css文件---一般使用
<link rel="stylesheet" type="text/css" href="css文件的路径">
- style属性
- 二.选择器
- 标签选择器
- 并集 和 （,）
h2,h1 {color:silver;font: 28px Verdana;} - 交集 中的（ ）
h3 p {color:silver;font: 28px Verdana;}
- 并集 和 （,）
- class选择器（.）
- id选择器（#）
- 派生选择器（ >+)
- 后代（ ）
- 子元素（>）
- 相邻兄弟（+）
- 属性选择器（[]）
p[class~="important"] {color: red;}还有开头 结尾 包含等 - 伪
了解，浏览器的兼容性比较差- 伪类选择器（:）
- 链接伪类
- 原始 link
- 悬停 hover
- 点击 active
- 点击之后 visited
- first-child,nth-last-child(N),nth-child(Nn),lang,target 等
- 链接伪类
- 伪元素
- first-line,first-letter,before,after 等
- 伪类选择器（:）
- 权重
继承或者* 权重是0元素和伪元素 权重是1类选择器、元素选择器、伪类 权重是10ID选择器 权重是100行内样式 权重是1000!important命令 被赋予最大的优先级- 继承/* <元素 <选择器 <ID选择器<行内样式 <important
- 标签选择器
- 三.盒子模型
- 盒子
- 外边距 margin: 20px
- 边框 border：2px solid red
上 border-top 下 border-bottom 左 border-left 右 border-right - 内边距 padding：20px
- 属性
- box-sizing
border-box 盒子大小为width content-box 盒子大小为 width + padding + border - box-shadow
- box-sizing
- 标签显示模式
- 块级元素、行内元素、行内块元素
块级元素?默认宽度容器的100%，都可容纳，盒子可控；行内元素??默认宽度为内容的宽度，只能容纳行内元素，盒子只有水平方向的margin和padding可控,其他无效行内块元素??同行,但是之间留有空隙，默认宽度为内容的宽度，盒子可控 - 隐藏
- 块级元素、行内元素、行内块元素
- 盒子
- 四.浮动 float
- 定义
- 脱离标准普通流的控制，移动到其父元素(element)中的指定位置
- 定义
- 五.定位 position
- 定位模式
- 自动定位 static
- 默认方式
- 无法使用边偏移和叠放次序z-index
- 相对定位 relative
- 有占位，原位
- 边偏移是相对于原来位置
- 绝对定位 absolute
- (子绝父相)
- 边偏移是相对于父，没有父就相对于浏览器
- 固定定位 fixed
- 边偏移相对于电脑屏幕
- 自动定位 static
- 定位模式
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18