内容回顾
-
表单标签
-
input
-
type
text 普通的文本
password 密码
-
radio 单选 默认选中添加checked
互斥的效果 给radio标签添加 相同的name
checkbox 多选
submit 表单提交按钮
button 普通的按钮
reset 充值按钮
name 会被封装到请求体中的key
value 是标签显示的内容,会被封装到请求体中的value
-
-
select
name 会被封装到请求体中的key
-
子元素一定是 option
value 是标签显示的内容,会被封装到请求体中的value
selected 默认选中的状态
-
textarea
name
value
rows 行数 决定了它的高度
cols 列数 决定了它的宽度
-
-
css的三种引入方式
行内样式 它的权重是最高的
<div style = 'width:200px;color: red;'>
alex
</div> 2.内接式
<head>
<style>
div{
color:red;
} </style>
</head> 3.外接式
<head>
<link rel="stylesheet" href="./index.css"/> </head> -
选择器
-
基本选择器
种类种类 语法 作用 标签选择器 div{} 选中页面中所有的 div
标签,选的共性类选择器 .box{} 找的是'共性'的元素,class可以重复,又可以设置多个 id选择器 #box{} 找的是'特性'的标签,它是唯一,通常是与后面的js有很大关系 统配符选择器 *{} 不建议在工作中使用,可以拿着做测试.重置样式库:https://meyerweb.com/eric/tools/css/reset/ -
高级选择器
种类 语法 作用 后代选择器 div p{} 选取后代(所有的孩子)的元素 子代选择器 div>p{} 选取亲儿子的元素 组合选择器 div,p,a,span{} 多个标签选择器组合,构成了组合选择器 交集选择器 div.atcive 前面是标签选择器,第二个是类选择器 -
伪类选择器 '爱恨准则 LoVe HAte'
种类 作用 a:link{} 没有被访问过的样式 a:visited{} 访问过后的样式 a:hover 悬浮时的样式 a:active 摁住的时候的样式 -
权重的问题
数 id 类 标签的数量
行内样式 1000 > id 100 > 类 10 > 标签 1
-
今日内容
盒模型
概念:
属性:
width 内容的宽度
height 内容的高度
-
padding 内边距 内容到边框之间的距离
背景色也被填充
border 边框
-
margin 外边距
需求: 做一个302*302的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*有多种方法*/
.box{
width: 200px;
height: 200px;
/*四个方向全部设置*/
padding: 50px;
border: 1px solid red;
background-color: darkslateblue;
}
</style>
</head>
<body>
<!--做一个302*302的盒子-->
<div class="box"></div>
</body>
</html>
盒模型的计算
如果保证盒模型不变,当加padding,就要对盒模型的宽或者高减,保证盒模型的不变
通过padding能调整子内容的位置,对于padding来说,通常描述的是父子之间的距离
width
定义:内容的宽度
height
定义:内容的高度
padding
定义:内边距 内容到边框之间的距离
.container{
width: 200px;
height: 200px;
background-color: darkgoldenrod;
/*一个值 四个方向都有值*/
/*padding: 30px;*/
/*两个值:上下 左右*/
/*padding: 20px 30px;*/
/*三个值: 上 左右 下 */
/*padding: 30px 20px 40px;*/
/*四个值: 上 右 下 左 顺时针*/
padding: 20px 30px 40px 50px;
}
四个方向单独设置
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
border
定义:盒子的边框
.box{
width: 300px;
height: 300px;
background-color: darkgoldenrod;
/*border: 1px solid darkred;*/
/*根据方向来设置属性*/
/*border-left: 1px solid darkred;*/
/*border-right: 5px dotted darkgoldenrod;*/
/*border-top: 10px double darkblue;*/
/*border-bottom: 1px solid greenyellow;*/
/*根据三要素*/
/*border-width: 5px 10px 1px;*/
/*border-style: solid double dashed;*/
/*border-color: red yellow darkcyan darkgray;*/
/*border: 0;*/
border-radius: 50%;
}
制作小三角
.sanjiao{
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-bottom: 50px solid green;
border-right: 50px solid transparent;
}
margin
定义:外边距 一个盒子到另一个盒子的距离
前提条件是: 标准文档流下
水平方向上 不会出现问题
垂直方向上: 会出现塌陷问题,我们以后再布局页面的时候设置一个方向,而不要设置两个方向
让标准文档流下的盒子居中
/*让盒子居中*/
/*margin-right: auto;*/
/*margin-left: auto;*/
margin: 0 auto;
浮动
要浮动一起浮动,另外 有浮动清除浮动
浮动的好处:
浮动实现元素并排
浮动的现象:
脱标
字围效果
如果标签一旦浮动,就不区分行内标签还是块级标签,可以任意设置宽高
贴边现象
浮动带来的问题
如果父盒子没有设置高度,子盒子都设置浮动,(脱标了,不在文档上占位置) 撑不起父盒子的高度
清除浮动
给父盒子设置固定高度
-
内墙法
在最后一个浮动元素的后面添加一个空的块级的标签,给这个标签设置类名clearfix
.clearfix{
clear:both;
}代码冗余
CSS居中补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 100%;
height: 200px;
background-color: green;
}
.active{
width: 400px;
height: 80px;
margin: 0 auto;
background-color: yellow;
}
.box{
width: 400px;
height: 80px;
background-color: red;
text-align: center;
line-height: 80px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="active">
<div class="box">alex</div>
</div>
</div> </body>
</html>
绝对定位的盒子的居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 300px;
height: 400px;
background-color: red;
position: relative;
}
.box{
width: 40px;
height: 40px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -20px;
}
/*属性选择器*/
input[type='text']{
font-size: 20px; }
ul li:first-child{
color: red;
}
ul li:last-child{
color: greenyellow;
}
ul li:nth-child(4){
color: deepskyblue;
}
ul li:nth-child(4n+1){
color: orange;
} </style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div> <input type="text">
<input type="password">
<input typeof="submit">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul> </body>
</html>