Web前端教程开发
笔记3.
1.Css选择器
标签选择器（TAG选择器）
div{} <div></div>
使用的场景
1.去掉某些标签默认样式时候
2.复杂的选择器，如层次选择器
4.群组选择器（分组选择器）
可以用逗号的方式，给与不同的选择器添加同一的CSS样式，来到达代码的复用
5.通配选择器
*{}-> div,ul,li,p,h1,h2,…
注：尽量避免使用通配选择器，因为会给所有的标签添加样式
使用方式：去掉标签的默认样式
2.层次选择器后代：
M,N{}
子代：M>N{}
兄弟：M~N{}M标签下的所有N标签
相邻：N+M{}当前相邻的N标签
3.属性选择器
M[atter]{}
=:完全匹配
*=：部分匹配
^=:起始匹配
&=：结束匹配
[ ][ ] [ ]组合匹配
4.伪类选择器
M：伪类{}
:link 访问前的样式（只能添加给a标签）
：visited:访问后的样式（只能添加给a标签）
：hover 鼠标移入时的样式(可以添加给所有标签)
：active 鼠标按下时的样式（可以添加给所有标签）
一般网站都只设置a{} （ link visted active）a:hover{} L V H A
:after :before 通过伪类的方式给元素添加一个文本内容 使用content属性
：checked ,:disabled ,:focus都是针对单元素的
结构性伪类选择器
nth-of-type() nth-child()
角标是从一开始的，1表示第一项.........n表示从0到无穷
frist-of-type
last-of-type
only-of-type
nth-of-type() 和 nth-child()的区别
type:类型
child:孩子
5.CSS继承
文字相关的样式可以被继承
布局相关的样式不可以被继承(默认是不能继承的，但是可以设置继承属性 inherit值)
<style>
div{width: 300px;height: 300px;border: 1px red solid;color: red;font-size: 30px;}
p{border: intherit;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
6.CSS优先级
1.相同样式优先级
当设置相同样式时，后面优先级较高，但不建议出现重复的情况。
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果设置相同样式，那么后写的优先级高。
3.单一样式的优先级
style行间>id>class>tag>*>继承
注：style行间 权重 1000
id 权重100
class 权重10
tag 权重1
4.！important
提升样式优先级，非规范方式，不建议使用（不能针对继承属性优先级的提升）
5.标签+类与单类
标签+类>单类
6.群组的优先级
群组选择器与单一选择器优先级相同，靠后写的优先级高
7.CSS盒子模型
组成：content（内容）>padding（填充物）>border（包装盒）>margin（盒子与盒子之间的距离）
content:内容组成区域（width和height组成的）
padding：内边距（内填充）和margin：内边距（内填充）
只写一个值：代表上下左右
写两个值：分别代表上下，左右
写四个值：分别代表上，右，下，左
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
注：
1.背景色填充到margin以内的区域，（不包括margin以内的区域）
2.文字在cintent区域内添加。
3.padding不能为负数，而margin可以为负数。
box-sizing
盒尺寸：可以改变盒模型的展示形态.
默认值：content-box:width,height,>content
border-box:width,height,>content padding border
使用场景
1.不用再计算一些值
2.解决一些100%的问题
marginn叠加
当给两个盒子同时添加上下外边距的时候，就会出现这个叠加的问题，这个问题只会出现在上下，左右是不会出现的
解决办法
1.BFC规范
2.想办法只给一个元素添加边距
marigin传递
margin传递问题只会出现在嵌套的结构中，且只有margin-top会有传递问题，其他三个没有传递问题
解决方案
1.BFC规范
2.给容器添加边框
3.margin换成padding
margin左右自适应是可以的，但是上下自适应时不可以的（如果要自适应上下部分，需要学到第二部分）.
width,height不设置的时候，会自动计算容器的大小，节省代码。
8.标签分类
按类型
block:div,p,ul,li,h1.......
1.独占一行
2.支持所有样式
3.不写宽的时候，宽与父元素相同
4.所占区域是一个矩形
inline:span,a,em,strong,img..
1.挨在一起
2.有些样式不支持，例如：width,height,margin,padding
3.不写宽的时候，宽由内容决定。
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，是由于换行产生的，可以定义font-sizing取消掉空隙
inline-block:input,select...
1.挨在一起，但是支持宽高
注：布局一般用块标签，修饰文本一般用内联标签
按内容
Flow:流内容
Metadate:元数据
Sectioning:分区
Heading:标题
Phrasing：措辞
Embedded:嵌入的
Interactive:互动的
按显示
替换元素：浏览器根据元素的标签和属性，决定元素的具体内容
img,input…
非替换元素：将内容直接告诉浏览器，将其显示出来
div,h1,p…
显示框类型
使用方式
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{width: 100px;height: 100px;background:red;display: block;}
div{width: 100px;height: 100px;background: red; display: inline;}
</style>
</head>
<body>
<div>块1</div>
<div>块2</div>
<span>2</span>
<span>3</span>
</body>
</html>
display:block,inline,inline-block
区别
display:none 不占空间的隐藏
visibility：hidden 占空间的隐藏
9.标签嵌套规范
ul,li
dl,dt,dd
table,tr,td
块能够嵌套内联
<div>
<span></span>
<a href="#"></a>
</div>
块不一定能嵌套块
允许
<div>
<div></div>
</div>
不允许，错误的写法
<p>
<div>
</div>
</p>
内联标签不能嵌套块标签`
错误的写法
<span>
<div></div>
</span>
正确的写法
<a href="#">
<div>
</div>
</a>
10.溢出隐藏
voerflow:
visible:默认
hidden
scroll
auto
X轴，y轴
overflow-x,overflow-y分别代表X轴和Y轴的滚动条
voerflow：hidden
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;height: 200px;
background-color: red;border: solid;overflow:hidden;}
</style>
</head>
<body>
<div>
溢出溢出溢出溢出溢出
溢出溢出溢出溢出溢出
溢出溢出溢出溢出溢出
溢出溢出溢出溢出溢出
溢出溢出溢出溢出溢出
溢出溢出溢出溢出溢出
溢出溢出溢出溢出溢出
溢出溢出溢出溢出溢出溢出
</div>
</body>
</html>
样式
11.透明度与手势
opacity:0(透明)~1（不透明）0.5（半透明）
注：占空间，所有的子内容也会透明
rgba():0~1
注：可以让指定样式透明，而不影响其他样式
cursor:手势
default:默认箭头
要实现自定义手势
准备图片：,cur,cico
cursor:url(./img/cursor.ico),auto;
12.最大，最小宽高
min-width,min-height
max-width,max-height
%单位i：换算->已父容器的大小进行换算的
一个容器怎么适应屏幕：容器加height:100%;body:100%;html:100%;
html,body{height:100%;}
.contrainer{height:100%;}
13.CSS的默认样式
没有默认样式的：
div,span
有默认样式的：
body->margin:上下：21.440px
h1->font-weight:bold
p->margin:上下：16px;
ul->margin:上下 16px padding:左 :40px
默认点：list-style:disc
a->text-decoration:underline"
14.CSS reset:
*{margin:0;padding:0;}
优点：不用考虑哪些标签有默认的mgrgin和padding
缺点：稍微的影响性能
body,p,h1,ul{margin:0;padding:0;}
u;{list-style:none;}
a{text-decoration:none:color:#999;}
img{dispaly:block]
问题的现象：图片跟容器底部有空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底部。
vertical-align:baseline:基线对齐方式，默认值
img{vertical-align:bottom;}解决方式是推荐的
115.float浮动
脱离文档流，延迟父容器靠左或靠右进行排列
left,right,none
float注意点
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联添加
如何清楚浮动
上下排列：clear属性，表示清除浮动，left,right,both
嵌套排列
固定宽高：不推荐，不能把高固定死，不适合自适应的效果
父元素浮动：不推荐，因为父元素容易影响到后面的元素
overflow：hidden(BFC规范)，如果子元素想要溢出，会收到影响
display:inline-block（BFC规范），不推荐按，因为父元素容易影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法
（clear属性只会操作块标签，对内联标签不起作用）
扫一扫
3468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
