html+css学习⼼得
最近⼀周在学习html+css的知识，总结⼀下学习⼼得。
1、css选择器
在⽹页样式设计时，有三种⽅法：⾏内样式，内部样式，外部样式。
⼀般采⽤的是外部样式，它利于维护，⽅便复⽤，也实现了⽹页内容与样式分离。
在优先级上，⾏内样式>内部样式>外部样式
所以选择器在设计样式时，显得⾮常重要。以下是⼏种常⽤选择器：
1. class选择器 .className{}
2. id选择器 #idName{}
3. 通⽤选择器 *{}
4. 标签选择器 标签Name{}
5. 后代选择器 标签Name 标签Name{}
6. ⼦代选择器 标签Name>标签Name{}
7. 兄弟选择器 标签Name+标签Nmae{}
8. 元素选择器 [元素Name=“元素值”]{}
9. 伪类选择器 ：
link 未被访问的
visited 已被访问的
active 正在活动的
hover ⿏标指针停留时
10. 添加内容 ：
before 之后添加
after：之前添加
2、css元素
关于css元素⼤致可以分为以下2类：
1. 块级元素：p，div，h（n），ul，li，form，table等
2. ⾏内元素：span，a，img，input等
主要区别
块级元素：可以容纳块级元素和⾏内元素，符合盒⼦模型，可进⾏宽⾼，边距，边框设计。
⾏内元素：只能容纳⾏内元素，不可进⾏宽⾼设计，和左右内边距，以及外边距。但是也有特殊情况，⽐如input和img元素，虽然属于⾏内元素，但是也符合盒⼦模型。
3、盒⼦模型
关于布局，不得不提到盒⼦模型，可以说，对盒⼦模型理解的透彻程度关系到能否学好布局。
ie6及更低级版本的ie游览器之外，盒⼦模型基本可以理解为以下情况
这个模型适⽤于所有的块级元素，通常在进⾏⽹页进⾏布局和编写样式时，都以这个模型为基准，能在编程时，知道哪个地⽅属于哪⼀块元素，被哪⼀⾏的代码控制。
有⼀个box-sizing属性设置为border-box时，宽⾼将包含border和padding值，有时在进⾏布局时也会⽤到。
⾏内元素也可以通过设置display属性变为盒⼦模型再进⾏样式布局。
4、浮动
普通⽂档流：
块级元素：从上到下
⾏内元素：从左到右，当前⼀⾏显⽰不下的是，会⾃动换⾏
浮动：
脱离普通⽂档流，不在占据页⾯的空间，其他未浮动的元素会⾃动补齐
当⽗元素未设定⾼度时将受到影响
浮动的元素会停靠在⽗元素的左边或右边或者停靠在其他已经浮动的元素的边缘上
浮动元素⾼度不受⽗元素的管控，但是宽度仍然在⽗元素的管辖中
浮动了的元素会变成⾏内块元素
清除浮动影响：
1、使⽤clear属性  none 默认值 left right both
2、对于⽗元素的影响
2.1 直接设置⽗元素的⾼度弊端必须要知道⽗元素的准确⾼度
2.2 ⽗元素也浮动弊端后续元素任然有影响
2.3 设置⽗元素的overflow  取值为hidden或auto  弊端如果有⼦级内容要是溢出显⽰的话，也被⼀同隐藏了  2.4 在⽗元素中追加⼦元素并且设置其clear的属性为both
2.5 使⽤after伪类选择器追加内容
当受影响的是⽂本、⾏内元素，⾏内块元素时采⽤环绕式的⽅式排列
不会被浮动元素压在底下，会巧妙的避开浮动元素
5、定位
相对定位：
元素不会脱离⽂档流元素原有的位置会保留
以⾃⾝的位置为⽬标做较⼩的偏移
适⽤场合：实现元素微调的时候
绝对定位：
元素脱离⽂档流不占据页⾯的空间
元素相对于它最近的已定位的祖先元素实现位置的初始化；
如果没有已经定位的祖先元素，那么元素会相对于body或者是html最⼤的祖先元素实现位置的初始化
已定位：position的属性值设置为：relative absolute fixed
绝对定位的⼀些影响
绝对定位的元素变成块级元素
绝对定位的元素可以使⽤margin，但是auto会失效
固定定位：
作⽤：将元素固定在页⾯可视区的某个位置处，不会随着滚动条变化⽽移动
固定定位的元素会脱离⽂档流
固定定位的元素会变成块级元素
固定定位永远是相对于body实现定位
适⽤场合：侧边栏、回到顶部按钮。
6、其他
结构化标签
为了减少命名⿇烦，可以使⽤header、nav、section、footer标签进⾏布局
表单
表单：主要是收集⽤户的各种类型数据，提交数据请求到服务器。由表单元素和表单控件构成的功能性标签 1、表单元素
属性
action：主要作⽤是规定表单提交的动作提到到服务器上处理的URL
默认值：提交到本页
method：指表单数据提交的⽅式
get 默认值
数据提交的⼤⼩限制  2kb
显⽰提交⽤户数据可以显⽰在地址栏
适⽤场合：向服务器要数据时
post
数据提交的⼤⼩不受限制
隐式提交提交的数据⾮专业⼈⼠看不见
适⽤场合：向服务器提交数据时
enctype
表单数据进⾏编码的⽅式
取值
application/x-www-form-urlencoded  默认值
multipart/form-data 上传⽂件时适⽤
text/plain
2、表单控件
input组元素
type属性默认值 text
属性：
type
value 值要提交到服务器的值
name 控件名称，服务器端适⽤，没有做名称，⽆法提交
名称匈⽛利命名⽅式类型+功能
disabled 禁⽤控件改属性，主要出现在控件中表达禁⽤  boolean类型的属性
textarea
选择框
其他
css固定定位边框阴影
box-shadow：
h-shadow：必须阴影的⽔平偏移距离 + 右偏移  - 左偏移
v-shadow：必须阴影的垂直偏移距离 + 下偏移  -上偏移
blur: 模糊距离
spread：阴影的尺⼨
color  阴影的颜⾊
inset 将默认的外阴影更改为内阴影
溢出处理
overflow：
visible  默认值溢出可见
hidden  溢出部分被裁减掉，且不可见
scroll  滚动不论内容是否溢出都出现滚动条
auto  ⾃适应溢出边出现滚动条
overflow-x  横向溢出的处理
overflow-y  纵向溢出的处理
堆叠
z-index
取值：
没有单位的数字，值越⼤，约靠上
可以是负数（⽤的少），设置了负值该元素被压在所有元素之下包括⽂档流中的元素
只作⽤于在元素的定位设置为relative absolute fixed的元素。
因为这些元素如果不指定z-index 则后来者居上
⽗⼦关系的元素不能使⽤z-index修饰堆叠顺序，永远是⼦压在⽗上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。