day38_css
内容回顾：
1.标签嵌套
行内标签和块标签
行内标签不可以嵌套块级标签，但不是绝对。
块标签嵌套块标签、行内标签。
但是p标签中的子标签只能是行内元素、表单元素、图片
2.table
tr
td
3.form action行为 methods:get||post enctype='' 一定要提交文件到服务器，一定是post请求
lable
for: 与input的id有很大关联
input 重要
type
text:普通的文本 *
password：密码本 *
submit:* 与form 表单中的action 由关系
radio: 单选框
checkbox:多选
name
value
select
option
textarea
rows 宽度
cols 高度
4.css 带你们挖坑 、填坑、跳进坑
三种引入方式：
（1）行内样式>内接样式和外接样式
@import url()
link1
link2
基本选择器
选择器的作用：选中标签 设置属性
标签选择器:
选择的是‘共性’，
不管标签嵌套多少层
<div id='box' class='box'>alex</div>
div{
color:red;
}
div
div
div
div
id选择器
选择的是 “特性”，id是唯一的，未来与js有很大关联
#box{
color: yellow;
}
class选择器
选择的是共性，类选择器可以设置多个。一个标签也可以设置多个 class
.box{
color:green;
}
.active{
color:red;
}
通配符选择器 重置样式
*{
padding:0;
margin: 0;
}
ul 清除前面的点
ul{
list-style:none;
}
a{
text-decoration:none; 清除下划线
}
今日内容：
1.高级选择器
-后代选择器 *****
儿子、孙子、重孙子
最后选中li 下的儿子或孙子 p 标签
div ul li p{
color: red;
}
-子代选择器
只能是亲儿子
div>p{
}
-组合选择器
多个选择器组合到一起共同设置样式; 用逗号分开
div,p,a,li,span{
font-size: 14px;
}
-交集选择器，即同时包含这两中或者多种标签或属性；中间之间没有空格
div.active{
}
属性选择器 不建议使用；可以加个class
记住这一个就行
input[type='text']
伪类选择器：LoVe HAte
/*没有被访问的a标签的样式*/;必须是被选中时
.box ul li.item1 a:link{
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
a:link 没有被访问的
a:hover 鼠标悬停的时候
a:visited 访问过后的
a:active 摁住的时候
根据选择器移动到上面相应的而其它元素的显示
.father:hover .child{
color: red;
display: block;
}
伪元素选择器
p:before 在...的前面添加内容 一定要结合content
p:after 在...的后面添加内容 与后面的布局有很大关系
标签的第一个元素
p:first-letter{
color: red;
font-size: 26px;
}
/*用伪元素 属性一定是content*/
/*伪元素选择器与后面的布局有很大关系*/在P标签的前后加内容
p:before{
content: '$'
}
p:after{
content: '.'
}
重要
.box2{
/*需求：这个盒子一定是块级标签 span==>块 并且不再页面中占位置。未来与布局有很大关系 */
/*隐藏元素 不占位置*/
/*display: none;*/
display: block;
/*display: none;*/
/*隐藏元素 占位置*/
visibility: hidden;
height: 0;
}
css3的选择器nth-child()
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
}
/*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*/
div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
伪选择器
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
2.css的继承性和层叠性 （坑）
继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。
盒模型的属性是不可以继承下来的
a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性
层叠性： 覆盖
<style>
/*css层叠性 权重 谁的权重大就会显示谁的样式*/
/*如何看权重 数数选择器 id class 标签*/
/*1 0 0*/
/*#box{
color: yellow;
}*/
/*0 1 0*/
.box{
color: green;
}
/*0 0 1*/
div{
color: red;
}
/* id > 类 > 标签*/
</style>
important
（1）行内> id > class > 标签 ****
1000 > 100 > 10 > 1
（2）数数 数 id class 标签
（3）先选中标签，权重一样，以后设置为主
（3）继承来的属性 它的权重为0 ，与选中的标签没有可比性
（4）如果都是继承来的属性，保证就近原则（谁离标签近就选哪个标签）
（5）都是继承来的属性，选择的标签一样近，再去数权重
3.盒模型
属性：
width:内容的宽度
height:内容的高度
padding:内边距 内容到边框的距离
border:边框
margin:外边距 另一个边到另一个边的距离
盒模型的计算：
总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
前提是：在标准文档流
padding：父子之间调整位置
margin: 兄弟之间调整位置
4.布局的方式 浮动
浮动能实现元素并排
float:left
盒子一浮动 就脱离了标准文档流，不占位置，不会另占一行了，
