html+css思维导图_编号p5183891-TreeMind树图

思维导图大纲

html+css思维导图模板大纲

html

div盒子

h1~h6（标题）

段落p

span标签

图片标签 img

块级标签（独占一行，其他元素会被挤压换行显示支持宽高）

div（区块标签：大） p（p标签不可以嵌套其他块级标签） h1~h6 ol ul li dl dt dd header footer nav form table

行内标签可以同行显示的，不支持宽高，由内容决定

行内块标签：sapn、 img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u、li、ins、del、dfn、kbd、var span（区块标签：小） a strong b ins del i br

行内块级标签可以同行显示支持宽高

input img

标签的相互转换

display:inline;:转为行内元素 display:inline-block：转为行内块级标签 display:block;：转为块级标签 display:none;：隐藏元素，元素会从页面中消失不见，页面进行了重新绘制

文本框input

更改input的placeholder的颜色

input::placeholder{ color: #686868; }

列表

无序列表

<ul> <li>前端开发</li> <li>java开发</li> <li>测试开发</li> </ul>

有序列表

ul、li都是独占一行 ul标签默认上下有外边距margin和左边的内边距padding-left

清除列表的默认样式

ul{ margin: 0; padding: 0; list-style: none; }

css

css选择器

标签选择器

类选择器

id选择器

后代选择器（派生选择器）

中间使用空格隔开

子元素选择器

找到指定标签里面的满足条件的直接子标签，只找儿子，不找孙子、重孙子…

中间使用>隔开

相邻兄弟选择器

找到指定标签后面相邻的第一个满足条件的兄弟标签

中间使用+隔开

后续兄弟选择器

找到指定标签后面所有满足条件的兄弟标签

中间使用~隔开

属性选择器

根据标签上的属性名和属性值找到满足条件的标签

选择器说名 [属性名] 找到标签上带有指定属性名的标签 [属性名=属性值] 找到标签上带有指定属性名和属性值的标签【精确匹配】 [属性名*=属性值] 找到标签上指定属性名的属性值中含有指定的值的标签【模糊匹配

伪元素选择器，通过css代码在html标签的开头或结束添加一个渲染区域，该区域可以设置css样式

::before 向标签中内容之前添加一块渲染区域

::after 向标签中内容之后添加一块渲染区域

::before和::after必须搭配content:"";一起使用才有效 ::before和::after渲染的是一个行内元素，如果需要设置宽度和高度，则需要转为行内块级元素或块级元素 ::before和::after渲染的是标签中的子元素

伪类选择器

:link 向未被访问过的超链接添加样式 :visited 向访问过的超链接添加样式 :hover 向鼠标悬停时添加样式，当鼠标移入标签时添加的样式 :active 向被激活的标签添加样式 :focus 向拥有键盘输入焦点的标签添加样式

css样式

height：设置标签的高度

width：设置标签的宽度

background-color：设置标签的背景颜色

margin

margin复合属性：一个值：上下左右两个值：上下左右三个值：上左右下四个值：上右下左

margin:0 auto；居中

border

solid：实线 dashed：虚线 dotted：点线 double：双实线

padding

padding复合属性：一个值：上下左右两个值：上下左右三个值：上左右下四个值：上右下左

字体样式

font-style：设置字体的风格

normal：默认值，正常文本

italic：斜体

font-size：设置字体的字号，字体的大小，数字越大，字号越大

font-family：设置字体的类型

可以设置多种风格类似的字体，中间使用逗号隔开，浏览器先在系统中找第一种字体，如果有直接作用，如果没有则找第二种字体，一般最后一种字体是通用字体。字体名如果是中文或多个英文单词，需要使用双引号或单引号包裹字体名称

font-weight：设置字体的粗细

100~900：数组越大，加粗效果越好，不能带单位 normal：默认值，正常粗细 bold：加粗 bolder：更粗 lighter：比正常更细

字体引用技术

可以在网页中使用自己的字体文件，系统中不一定安装了该字体

/* 一个@font-face只能引入一种字体 */ @font-face { /* 给引入的字体取名 */ font-family: 字体名称; /* 连接需要引入的字体文件 */ src: url(连接字体文件格式1 的文件路径),url(连接字体文件格式2 的文件路径); } div{ font-family: 字体名称; }

文本样式

color：设置文本的颜色

text-align：设置文本的对齐方式 left：默认值，左对齐 center：居中对齐 right：右对齐

针对单行文本水平垂直居中，设置text-align:center;和line-height:盒子的高度

line-height：设置文本的行高

text-decoration：设置文本的修饰

none：默认值，无，取消a标签默认的下划线 underline：下划线 line-through：中划线，删除线 overline：上划线（了解）

letter-spacing：设置字符的间距，一个中文就是一个字符，一个英文字母就是一个字符

word-spacing：设置字间距，是以空格来区分

text-indent：设置首行缩进

text-transfrom：设置字母的大小写

背景样式

background-color：设置背景的样式

backgroud-image：设置背景的图片

background-repeat：设置背景图片是否重复铺设

repeat：默认值，沿着x轴和y轴都平铺 repeat-x：沿着x轴平铺 repeat-y：沿着y轴进行平铺 no-repeat：不平铺

background-position：设置背景图片的显示位置

background-position: x轴 y轴;

方位单词：两两搭配使用 left（左） right （右） center（居中） top（上） bottom（下）

像素：0px 0px 相当于盒子的左上角

百分比：50% 50%相当于center center

background-size：设置背景图片的大小，css3提出

cover：宽度和高度都铺满，超出部分隐藏 contain：宽度和高度只铺满一边，另一边不管 x y：分别代表宽度和高度，如果只设置一个值，代表的是宽度，高度等比例缩放

background-attachment：设置背景图片是否固定在页面上

scroll：默认值，随着滚动条滚动 fixed:固定在页面上，不随着滚动条滚动

background：复合属性

background: pink url(./homeNewwork/img/bz01.jpg) no-repeat 50% 50% / 100px 200px;

注意：同时设置背景图片显示位置和背景图片大小时，中间使用/隔开，/前面代表显示位置，/后代表的是图片的大小

鼠标样式

抓手 cursor: pointer;

浮动（浮动常用于页面布局，用于让元素同行显示）

标准文档流概念：在页面布局过程中，元素默认按照从上到下，从做到右，块级元素独占一行，行级元素共享一行的排列规则

脱离文档流概念：在页面布局过程中，元素不再遵循标准文档流的规范进行排列，有自己的排列规范，就称为脱离文档流。

float: left | right | none;

none：默认值，不浮动

left：左浮动

right：右浮动

特点：浮动元素可以同行显示，排列不下时会自动换行显示，不存在兼容性问题浮动元素会脱离文档流，放在标准文档之上【只要设置了浮动，当前这个元素会脱离文档流，不再遵循标准文档流的规则进行排列】原来的空间不再占用行级设置浮动后，行级元素是支持宽高注意：只有设置了浮动的元素才可以同行显示多个元素同时设置浮动时，后面浮动的元素会找到前面浮动元素的边界或找到第一个元素找到父元素的边界就停止。早期浮动用于实现图文混排的，浮动元素会挤开后面非浮动元素的文本。块级元素设置浮动后，如果不设置宽度时，宽度由内容决定

浮动布局遇到的问题

一般在开发中会遇到高度由内容决定，一旦设置浮动，浮动元素会脱离文档流，造成浮动元素不会参与父元素高度的计算解决方案：给父元素设置高度，不能让高度根据内容自动计算给父元素设置overflow:hidden;：让盒子变成一个BFC盒子，可以让浮动元素参与父元素高度的计算

清除浮动元素的影响

语法 clear:left | right | both；

left：清除左浮动的影响

right：清除右浮动的影响

both：同时清除左浮动和右浮动的影响

清除浮动的方法

在浮动元素后添加空白的div设置clear可以清除浮动

在父标签上添加伪元素选择器来清除浮动

.clearfix::after{ content: ""; display: block; clear: both; }

怪异盒模型结构