html和css基础知识（5）

5-18.盒子模型width height

• 宽高设置

  

5-19.边框设置border

• 边框设置

  

• 单独设置

• 内边距是内容区域边框的距离

  

• 内边距撑大盒子问题

  • 盒子实际宽度（高度）=width(内容区域的宽度)/height(内容区域的高度)+左右的padding值(上下内边距)+左右边框(上下边框)
  • 一个块元素没有设置宽度，给这个块元素设置左右内边距，不会撑宽盒子
  • 块元素设置宽度，必然撑宽盒子
  • 行内元素，行内块元素设置左右内边距，必然撑宽盒子,上下内边距必然撑高盒子
• 外边距设置
• 外边距可以使 设置了宽度的块元素水平居中

• margin:0 auto只能使设置宽度的块元素水平居中

• text-align:center 可以使块元素里面的内容（文字，行内元素，行内块元素）注意此处没有块元素，也就是说内部的块元素将只会使其中内部块元素的内部内容继承水平居中效果，对于自身并不会水平居中；而margin的水平居中正是使设置宽度的块元素水平居中

• 行内元素只能设置左右内外边距，不能设置垂直上下的内外边距

• 外边距遇到的两个问题

• 相邻块元素的垂直外边距的合并

• 嵌套块元素的垂直外边距的合并
• 高度剩余法
• 清除input默认边框 border:0/none
• 清除轮廓线outline:0/none
• 伪类 ：focus 获取光标焦点的状态 配合input使用
• 第一个值是阴影的水平偏移量，正值向右，负值向左
• 第二个值是阴影垂直偏移量，正值向下，负值向上
• 第三个值阴影的模糊范围
• 第四个值是阴影大小
• 第五个只是阴影的颜色
• 阴影默认是外阴影
• rbga()设置单颜色的透明，a是alpha透明，取值范围0-1,0.5的0可以省略
• opacity:设置元素整体的透明度，取值范围0-1
• 在页面上，元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，直到碰到父元素的边界，标准流（普通流）

• 浮动的元素会脱离标准流的控制，不占据原来的位置

• 浮动可以使（块）元素在一行显示

• 浮动只能浮动到父元素的左边和右边，受到父元素内边距控制

• .浮动元素顶对齐，代码换行没有缝隙

• 浮动元素不会影响标准流里的块元素，只会影响下边的元素

• 浮动元素有了行内块元素的显示特点：

• 块元素浮动之后，不会默认父元素的宽度，默认高度变成0，内容会撑开盒子宽高

• 行内元素浮动之后，可以设置宽高了

• 当文字行内元素行内块元素遇到浮动元素时候，会环绕，不会跑到浮动元素的底下

• 浮动元素掉下来，是因为浮动子元素宽度相加超过了父元素宽度，浮动的子元素不设置宽度，被内容撑开的最大宽度是小于等于父元素的宽度

• 清除浮动的原因：为了解决父元素不能设置高度，里面的子元素浮动之后不能撑开父元素高度问题

• 清除浮动：

• 额外标签法： 在最后一个浮动元素后面加一个额外标签

• 给浮动的父元素（亲爹），使用overflow:hidden清除浮动，触发BFC，块级格式化上下文，独立的布局区域，不受到外部因素的干扰

• 单伪元素清除法

  

• clearfix双伪元素清除浮动

• :hover伪类 ::before前伪元素
• ::before 前伪元素是在元素里面前边插入伪元素，可以当做行内元素对待
• ::after 后伪元素是在元素里面的后面插入伪元素，可以当做行内元素对待
• 可以写成:before :after
• 其中content为必写属性，否则伪元素不成立
• 静态定位：默认值
  • position：static;
• 相对定位：
  • 相对定位元素不脱标还占据原来的位置
  • 相对定位的元素位置偏移基于自身位置
  • position: relative;
• 绝对定位：
  • 绝对定位的元素脱标，不占据原来的位置
  • 绝对定位的元素，所有父元素没有定位，位置偏移基于浏览器
  • 绝对定位的元素，如果父元素有定位，位置偏移基于离他最近的使用了定位的父元素偏移
  • 绝对定位的元素有了行内块的显示特点
  • 绝对定位的块元素，不会默认父元素的宽，默认宽度为0
  • 绝对定位的行内元素，可以设置宽高
• 子绝父相：
  • 子绝父相：子元素绝对定位，父元素相对定位，子元素的位置偏移基于父元素，父元素不脱标，还占据原来的位置，下边的盒子顶不上来，布局正常
• 固定定位：
  • 固定定位的元素脱标，不占据原来的位置
  • 固定定位的元素的位置偏移基于浏览器可视窗口
  • 固定定位的元素有了行内块元素的显示
  • 固定定位的块元素不会默认父元素的宽度，默认宽高为0，内容会撑开宽高
  • 固定定位的行内元素会转换成行内块元素，可以设置宽高
  • 固定定位与绝对定位比较
  • 绝对定位位置偏移基于浏览器的时候，会随着滚动条（内容）滚动
  • 固定定位位置偏移基于浏览器可视窗口的时候，不会随着滚动条（内容）滚动
• 当元素的定位时候，margin:0 auto失效
• 只能使标准流里的块元素水平居中
• 定位盒子居中显示
• 方法1
• z-index:默认值为0，标签越靠后，z-index层叠顺序就越靠前
• 如果属性值相同时，按照书写顺序，后来居上
• 数字后面不加单位
• 注意：z-index只能应用于相对定位，绝对定位，固定定位上，对于标准流和浮动，静态定位无效
• display:none:隐藏对象，隐藏之后不占位置
• visibility:hidden:对象隐藏，隐藏之后还占据位置

• overflow：visible;溢出可见 默认值

• overflow:scroll;不管内容是否溢出，都生成滚动条

• overflow:auto;溢出时候有滚动条，不溢出不生成滚动条

• overflow:hidden;溢出隐藏

• 溢出的内容不占位置

• cursor:default 默认值 小白
• pointer:小手
• move:移动
• text:文本
• not-allowed 禁止
• help:帮助
• outline:0/none:清除轮廓线
• resize:none:禁止文本域拖拽
• vertical-align:是行内元素和行块元素、文字，垂直对象，对块元素无效，的专有属性
• vertical-align:baseline:清除图片底部的缝隙，只需要将vertical-align的值设置为除了baseline(基 线以外的值)都可以，或者将图片转换为块元素，也能清除图片底部的缝隙
• ​ top 顶对齐
• middle 垂直居中对齐
• bottom 底对齐
• 使用步骤
• 1.背景图片撑不开盒子的宽高，测量需要局部的大小，设置为盒子的宽高
• 2.将测量的局部大小的坐标值，设置成背景定位的负值

• ​ div的第一个孩子

• 

• div的最后一个子元素

• 选择父元素的第几个子元素（从1开始）
• 选择父元素的倒数第几个子元素
• 选择父元素里边同类型的第几个子元素
• ::placeholder修改占位符样式，占位符选择器，修改占位符的样式，必须是两个占冒号
• 通过标签的属性来选择标签
• 通过标签完整的属性值来选择标签
• 通过标签属性的值以某些字符开头的来选择标签

• 通过标签属性的值以某些字符结尾来选择标签

• 

• 通过属性的值包含某些字符来选择标签

• 1.定位布局（display/position/float/clear/visibility/overflow）
• 2.自身属性（width/height/margin/padding/border/background）
• 3.文本属性（color/font/text-decoration/text-align/vertical-align/white-space/border-word）
• 4.其他属性(css3)(content/cursor/boroder-radius/box-shadow/text-shadow/background:linea-gradient)

• 过渡动画从一种状态到另一种状态（属性值的变化），过渡需要触发条件，通常都写在开始状态

• 过渡属性：transition-property:(all 全部属性 多个属性用逗号隔开)

• 过渡时间：transition-duration:1s

• 过渡时间曲线：transition-timing-function:linear/ease(默认)/ease-in/ease-out/ease-in-out

• 过渡的延时：transition-delay:1s