html的结构
<!DOCTYPE html> <html lang="zh"> <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> </head> <body> <!-- 网页内容--> </body> </html>
文档流
普通的网页是从浏览器的左上角开始排列的,遵循从上到下,从左到右。
可以使用float、absolute脱离正常文档流。
块级元素和行内元素
块级元素(block)
div、p、h1-h6都是块级
特点:独占一行,可以设置宽高。
行内元素(inline)
a、img、button
特点:宽高是根据自身的内容决定。
行内块元素(inline-block)
特点:inline-block 产生的空隙与父级元素继承或者设定的 font-family、font-size 有关,通常情况下,12px 大小的 tahoma 字体,inline-block 后元素间产生的空隙(间隙)大约是 5px
盒子模型
盒子由margin、border、padding、content组成。
计算方式
由box-sizing决定。
- content-box:默认的计算方式。最终在网页上展示出来的宽高=content的宽高,不会加上border和padding.
总结:content往外撑开。 - border-box:最终在网页上展示出来的宽高=content的宽高+padding+border。
总结:content向里面缩。
常用标签(element)
语义化标签
开发人员能够通过标签名一眼就知道标签是干什么的。同时也为了让搜索引擎(比如百度、谷歌、360),语义化标签不需要设置样式或者属性。
strong
加粗效果,主意用来强调。
和b
标签效果一样。但是推荐用strong。
header
页头,html5语义化标签。
footer
页脚,html5语义化标签。
article
文章
section
章节
nav
导航
aside
侧边栏
div
包装容器。单独使用没效果。块级元素,独占一行。
h1-h6
一般用于文章的标题 。h1最大,h6最小,字体有加粗效果。默认有margin.
a
行级元素,超链接,默认有下划线,点击后能跳转。
href:设置超链接。
使用text-decoration取消下划线。
p
段落,代表文章的一段。块级元素。默认有上下margin.
line-height:设置每行之间的距离。
表单标签
表单属性
name: 单选框、复选框的name相同,才算一组。否则会造成数据错乱。
value:代表选择项的值,组内的值不能重复,必须唯一,否则选择就没意义了。
form
使用action属性配合input的name和value,还要使用一个submit类型的input,可以达到表单提交。
<form action="baidu2.html"> <input type="checkbox" value="cb1" name="in1">fefe <input type="checkbox" value="cb2" name="in2">fefe <input type="text" name="itxt" value="">fefe <input type="submit">提交 </form>
select
下拉选择。为了多选一。和input多选框功能类似。
optgroup:给选项分组。看需求使用,不需要分组就不用。
option:代表每个选项。
<select name="fefe" id="sex"> <optgroup label="选项1"> <option value="1"> fefe </option> <option value="2"> aaa </option> </optgroup> <optgroup label="选项2"> <option value="1"> fefe </option> <option value="2"> aaa </option> </optgroup> </select>
input
行级元素。
类型(type):普通输入框、密码输入框、多选框、单选框、日期选择框、颜色选择器、文件选择器。
光标样式:颜色、粗细。
输入提示字符串:placeholder
输入框样式
border是input的默认边框。
outline是伪类作用下的边框。
label
标签为 input 元素定义标注(标记)。
包装input后,将for属性的值设置为input的id,点击label会自动选择input.
<div> <input type="radio" value="man" name="sex" id="cb1"><label for="cb1">fefe</label> </div> <div> <input type="radio" value="woman" name="sex" id="cb2"><label for="cb2">fefe</label> </div>
button
作用是有点击效果,鼠标移上去会有特殊效果。
按钮的状态如下
默认状态
鼠标移上去的状态
按下状态
禁用状态
点击事件
设置onclick属性
<script> function start(){ } </script> <button onclick="start()">确定</button>
列表(ul、ol、dl)
列表就是按水平或垂直排列的多个同样的布局。
有序列表、无序列表、自定义列表。
image
展示图片。
常用属性
src:设置图片的来源。本地图片路径url、网络url。
scale:缩放比例。大于1代表放大,小于1代表缩小。
alt:当图片无法显示时,在网页中给出的提示。
<img src="https://xxx.xxx.png" alt="对图片的描述"/>
常用样式
object-fit:图片的显示方式。
按比例缩放(contain,可能会有留白)、裁剪(cover)、填充(fill,可能会变形)。
img{ object-fit: cover; }
deo
视频播放器,
常用属性
src:视频地址url.
autoplay:自动播放。
span
包装文字,方便设置单独的效果。
table
表格。
块级和行内元素
用法
div{ display: inline; }
lock:独占一行,可以设置宽高
inline:不会独占一行,可以和其他行内元素并排在一行内,不能设置宽高。
inline-block:不会独占一行,还可以设置宽高。
选择器
分类
id、class、通用(*)、标签选择器。
关系选择器
父子选择器(>)、后代选择器(空格)、相邻兄弟选择器(加号)、通用兄弟选择器(~)。
组合选择器(逗号)
伪类选择器
使用:
冒号
格式:
选择器 : 伪类
作用:满足冒号后面的条件时,样式才会生效被触发。
常用伪类
:hover
鼠标移上标签的范围时触发。
:checked
选中复选框或者单选框时触发。
:active
在标签上鼠标按住到放开这段时间触发。
:focus
input或者button被点击触发。
first-child
选择器所代表标签第一个子标签。
last-child
选择器所代表标签最后一个子标签。
nth-child()
选择器所代表标签子类的第n个标签,括号中指定位置。从1开始。
///div的第二个子标签 div:nth-child(2)
伪元素、伪类
只要跟鼠标有关的改变都是伪类。
要改变选择器内容的部分样式就是伪元素。
伪类
格式:
选择器 : 属性
常用场景:鼠标移动、点击、离开到标签上产生特殊的效果。
伪元素
作用:允许你对被选择元素的特定部分修改样式。比如改变选择器首字母的样式。
格式:
选择器 :: 属性
::first-line 第一行内容
::first-letter 首字母
::placeholder 输入提示
::selection 用户高亮选择后触发
常用通用样式
背景颜色
宽和高
阴影
边框
margin、padding
文字颜色
文字大小font-size
文字样式font-weight
文字字体font-family
文字装饰text-decoration
布局
float(浮动布局)
设置浮动 flost: left|right 取消浮动 clear-float: left|right|both
脱离正常文档流,后浮动的在先浮动人尾部。
浮动的元素处于没有浮动的上层。
position(定位)
确定标签在窗口中的具体位置。
absolute:绝对定位,相当于当前的可见区域窗口,元素会被移出正常文档流,以前占的位置会被后面的元素取代。
relative:相对定位,left、right、top、bottom相对于自身的位置。
fixed:固定定位。相对于整个浏览器窗口的位置。
sticky(吸附效果):默认会覆盖前一个sticky的标签。
static:元素默认就是静态,设置left、right、top、bottom不会生效。
Grid(格子布局)
grid-template-columns: repeat(1,100px); grid-template-rows: repeat(2,100px);
justify-items:水平对齐
align-items:垂直对齐
flex(弹性布局)
justify-content: space-between; align-items: center; flex-direction(主轴方向): row; flex-wrap(是否换行):wrap
子元素属性
设置子标签所占剩余空间的比例。
flex-grow: 2;
特点:所有子标签都会在一行排列,无视标签是块级还是行内元素。
主轴和纵轴
flex-direction
设置主轴方向
2个值:row-水平方向(默认值)。column-垂直方向
主轴和纵轴是相反的方向。
常用布局
flex-wrap:是否往主轴方向换行。
对齐
justify-content 根据主轴对齐
align-items 根据纵轴对齐
值:center flex-start flex-end space-around space-between space-evently
flex-grow:是flex容器的子标签的属性,它会告诉容器它自身的比例。
.container { display: flex; height: 2000px; } .d1{ flex-grow: 1; } .d2{ flex-grow: 3; } .d3{ flex-grow: 1; } <div class="container"> <div class="d1">11</div> <div class="d2">1132</div> <div class="d3">22</div> </div>
百分比布局
相对于父容器空间所占百分比。
div{ width: 50%; }
对齐效果
CSS 布局 – 水平 & 垂直对齐 | 菜鸟教程 (runoob.com)
水平对齐
text-align
justify-content:
div中水平对齐
设置一个固定的width,使用margin:auto水平对齐。
inline
当多个inline或者inline-block需要水平对齐是,用vertical-align设置。
vertical-algin: top|middle|bottom
垂直对齐
align-items