-
表单标签
-
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>