表格元素表

1、thead、tbody和tfoot的含义 thead、tbody和tfoot可以使表格的结构更加清晰 thead是表格的头部（页眉） tbody是表格的主体（主要内容） tfoot是表格的底部（页脚） 2、文本框、密码框、单选框、多选框、提交按钮、下拉列表 3、单选框与多选框设置默认选中使用哪个属性 checked 4、下拉列表设置默认选中使用哪个属性 selected 5、有一个class名称为box的盒子，需要给其所有的子孙后代的a标签添加文字颜色为红色，代码如何 写？ 6、简述什么是盒模型？ 所有元素都具有盒模型，盒模型也叫做框模型，包含：内容、内填充、边框和外边距。 总宽和总高的计算

                    提交">                        

.box a {   color:red; }7、解释padding：20px 50px的含义 设置上下的内填充是20像素，左右的内填充是50像素 8、border-style:solid double dotted dashed的含义 上边框是实线、右边框是双线、下边框是点状虚线、左边框是虚线 9、如何去掉边框 10、如何用边框制作三角形？ 制作朝左的三角形代码如下： 11、背景属性的简写顺序   补充： 1、复合选择器 伪类选择器 作用：给元素添加特殊效果的 链接伪类 链接伪类的书写顺序必须按照lvha的顺序来写，否则可能出现问题 （1）:hover 鼠标悬停在自己身上改变自己的样式 border:0; border:none; width:0; height:0; border:100px solid; border-color:transparent red transparent transparent; /*兼容*/ font-size:0; line-height:0; background:background-color background-image background-repeat backgroundposition; a:link{}           /*未访问时的链接效果*/ a:visited{}         /*已经访问过的链接效果*/ a:hover{}             /*鼠标悬停时的链接效果*/ a:active{}             /*鼠标按住不放时的链接效果*/ element:hover {     /*css样式*/ }鼠标移入到class名称为box的元素身上，改变自己的背景颜色为黄色 鼠标悬停时改变子元素的样式 鼠标移入到class名称为box的元素身上，改变子元素的文字颜色为紫色 （2）:active 鼠标按住不放时改变自己的样式 2、前景图与背景图的区别： 书写位置：img写在body中，背景图写在样式表中 占位与不占位： 前景图是占位的，背景图是不占位的 前景图有实际含义的，而背景图没有实际含义，只是起到装饰作用 前景图可以被搜索引擎搜索到，而背景图是不可以的   一、css的三大特性 1、css层叠性 是指多种css属性的叠加 样式不冲突 样式不会层叠，会叠加 样式冲突 同一个元素身上拥有两个以上的相同属性时，会发生css样式的层叠 就近原则（离元素近的样式会生效） /* .box:hover {   background-color: yellow; } */ element1:hover element2 {   /*css样式*/ } .box:hover p {   color: blueviolet; } element:active {     /*css样式*/ }2、css继承性 子承父业，子元素可以继承父元素的部分样式   可以继承的样式： text-、font-、line-、color属性、列表中的list-可以继承 如果样式不能继承时，可以使用inherit来实现继承   继承好处：合理的使用继承性，可以降低css代码的复杂性，简化代码 注意: a标签的文字颜色不能继承 3、css优先级 在同一个元素身上，通常会有两个或者两个以上的css规则，此时： 选择器相同，执行层叠性 选择器不同，会出现优先级问题 选择器优先级 （1）基础选择器 权重越高，优先级越高 id选择器 100 类选择器、伪类选择器 10 标签选择器 1 通配符选择器 0 （2）复合选择器 权重计算方法：由构成的所有基础选择器的权重之和构成 .box {   width: 200px;   height: 200px;   background-color: pink; } .bgRed {   background-color: red; } .box {   color: red; } .box a {   color: inherit; }样式表优先级 行内样式>内部和外部样式   （3）特殊情况 !important 设置了！important的css规则将拥有最高权重 继承的权重0 权值相同时，执行就近原则   二、标签分类 1、块级元素 具有display:block属性的元素 块级元素的特性： 元素是垂直排列 高度自适应 宽度100% 具有全部盒模型特征 嵌套：块级标签里面可以嵌套块级和行级及行块级元素 p标签和h系列标签里面放置的是文本，不建议嵌套块级元素，尤其是div 常用标签：div、p、h1-h6、 ul、li、ol等   2、行级元素 具有display:inline属性的元素 行级元素的特性： 宽度和高度都是自适应的 横向从左到右排列，元素与元素之间会有间距 具有部分盒模型特征（设置宽高无效、上下margin也无效） 嵌套：行级元素不能嵌套块级元素 常用行级元素： b、strong、em、i、a、span等 注意： #wrap .box a {}     /*权重之和 100+10+1=111*/ element {   cssRule !important; }a标签里面不能在放a标签 特殊情况下，a标签可以嵌套块级元素的，嵌套时最好将a标签转成块级元素   3、行块级元素 本身具有display:inline-block属性的元素 行块级元素的特点： 水平排列，元素与元素之间是有间距的 可以设置宽高 具有全部盒模型特征 常见行块级元素：img、input、td等   三、框模型的转换 display:block; 转成块级元素 display:inline; 转成行级元素 display:inline-block; 转成行块级元素 display:none; 使元素隐藏   四、外边距塌陷问题 1、父子元素的外边距塌陷 问题描述：给父元素设置margin-top，也给子元素设置margin-top，最终显示的值为较大的margintop 产生的原因：父元素与子元素公用了一个margin区域 解决方案： 给父元素添加边框 给父元素设置padding-top拉开与子元素之间的间距 .wrap {   margin-top: 100px;   width: 500px;   height: 500px;   background-color: pink;   /* 解决方案一 */   border: 1px solid red; } .box {   margin-top: 50px;   width: 100px;   height: 100px;   background-color: red; }给父元素添加overflow属性，属性值设置为除visible以外的其他值都可以解决父子元素外边距塌陷   2、兄弟元素的外边距塌陷问题 问题描述：有两个兄弟元素，第一个设置了margin-bottom，第二个元素设置了margin-top，这时候两 个元素之间的margin取的是较大值 产生的原因：公共了一个margin区域 解决方案： 给其中一个元素嵌套一个父盒，并给父盒设置overflow属性 五、浮动 .wrap {           margin-top: 100px;           width: 500px;           height: 500px;           background-color: pink;           /* 解决方案二： */           padding-top: 50px;       }       .box {           width: 100px;           height: 100px;           background-color: red;       } overflow:hidden | auto |scroll;

div1

div2

css布局的三大机制： 普通流/标准流/正常文档流 块级元素：垂直方向上一个接一个的排列 行级元素、行块级元素： 水平方向上一个接一个的排列 浮动 块级元素水平排列 定位 1、浮动 作用：块级元素水平排列 2、浮动的相关属性 （1）没有浮动 默认值，主要用在原本有浮动的元素去掉浮动时使用 （2）左浮动 （3）右浮动 3、浮动的特性 设置为左浮动或者右浮动的元素会脱离正常文档流，不占位 提升层级 块级元素设置左浮动或者右浮动时，如果我们设置了宽高，按照设置的高宽来显示，如果没有设置 宽度，宽度变成了自适应的 行级元素设置左浮动或者右浮动时，可以支持宽高设置 4、浮动带来的影响 子元素设置了左浮动或者右浮动时，父元素的高度塌陷（高度为0），会影响后续的布局 5、清除浮动 清除浮动的本质：需要让浮动元素参与父元素的高度计算 （1）给父元素添加固定的高度 缺点：不够灵活 float:none; float:left; float:right; .wrap {   height: 202px; }（2）给父元素添加overflow属性 优缺点： 比较灵活 当元素超出盒子时可能会被隐藏掉 （3）额外标签法 需要给浮动元素的下面添加一个空的div，这个div本身不浮动，给这个div设置clear:both这个属性 优缺点： 结构上多余，造成代码冗余 （4）推荐方式 优缺点：在结构中不会产生冗余代码，代码可以重复使用 其他 .wrap {   background-color: pink;   /* 给父元素添加overflow */   overflow: hidden; }

       

.wrap {   background-color: pink; } span {   float: left;   width: 200px;   height: 200px;   border: 1px solid red; } .clear {   clear: both; } .clearfix::after {   display: block;   content: "";   clear: both; } .clearfix {   *zoom:1;   /*兼容ie7-*/ }1、overflow属性 设置块级容器的内容超出时如何进行溢出处理 visible 可见的（默认值） hidden 隐藏 scroll 滚动 auto 自动 2、clear属性 用于清除浮动带来的影响的 clear:left 清除左侧浮动 clear:right 清除右侧浮动 clear:both 清除两侧浮动 3、伪元素 伪元素：元素是写在body中的，而伪元素是通过css的方式创建出来的，在我们的结构代码中是看不到 的 在...之前创建伪元素 在...之后创建伪元素 创建出来的伪元素是行级元素   overflow:visible | hidden | scroll | auto; element::before {} element::after {}