All Posts
盒子模型--边框--内边距--外边距
盒子模型： 内容区（content） 内边距（padding） 边框（border） 外边框（margin）border简写属性，通过该属性可以设置边框所有的相关样式，并且没有顺序要求 border: 10px red solid ;内容区(content). 内容由width 和 height 两个属性来设置 width 设置内容区宽度 height 设置内容区的高度边框:(border),边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部 边框的大小会影响整个盒子的大小 要设置边框，需要至少设置三个样式： 边框的宽度：border-width 边...
高度塌陷问题处理
高度塌问题： 在浮动布局中，父元素的高度默认是被子元素撑开的 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离 将会无法撑起父元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱方法一：利用clearfix类，这个样式可以同时解决高度塌陷和外边距重叠问题 .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; }方法二：不推荐使...
float属性（浮动） clear 以及after伪元素
float通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 可选值： none 默认值，不浮动 left 元素向左浮动 right 元素向右浮动 注意： 元素设置浮动后，水平居中的等式便不需要强制成立 元素浮动以后，会完全从文档刘中脱离，不在占用文档流的位置，所以元素下边的还在文档流的元素会自动向上移动浮动的特点 1.浮动元素会脱离文档里，不会占据文档流的位置 2.设置浮动以后元素会向父元素的左侧或右侧移动 3.浮动元素默认不会从父元素中移动 4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5.如果...
京东左侧导航条练习
<!DOCTYPE html> <html lang="en"> <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"> ...
CSS中的选择器
目录：常用选择器1.元素选择器： 作用：根据标签名来选中指定的元素 语法: 标签名{} 例子：p{} h1{} div{}2.id选择器： 作用：根据元素的id属性选中一个元素 语法: #id属性值{} 例子：#box{}3.类选择： 作用：根据元素的class属性值选中一组元素 语法: .class属性值{} 例子：.box{}4.通配选择器 作用：选中页面中的所有元素 语法: *{}关系选择器1.子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素 > 子元素<div><p></p></div&...