day05 day05 - 锐客网

A我今天学习到了什么

1温习day04的知识点

1.1.盒子模型

盒子模型:box-sizing:border-box 当设置box-sizing:border-box; 设置padding,和border,//它的宽度还是会保持不变 box-sizing:content-box; (默认清晰) //当设置padding和border时宽度会发生改变 //总宽度=width+border+padding

1.2.浮动float

1.目的:为了让元素并排显示 float：lest|right；（postion:relative// 相对的位置移动 top|left|right|bottom：1px；）

2如何清除浮动 (1)给下面的兄弟元素给clear:both;

(2)给父级加overflow:hidden;

(3)用伪元素,给父级内容生成 .row:before{ display:table; content:“”}//前面加 .row:after{ display:table; content:“” clear:both; }//后面加

1.3.定位:position

position:absolute | relative //绝对定位，相对定位

Relative 定位相对定位元素的定位是相对其正常位置。 postion:relative//父级专属位置设定

Absolute定位（fixed固定//没有父级只有）绝对定位的元素的位置相对于最近的相对定位的父元素，如果没有已定位的父元素，那么它的位置相对于 ****定位的调试都通过left,top,right,bottom移动

z-index:设置元素的堆叠顺序给position:absolute绝对定位的元素当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度

1.4.布局方式的总结

1.默认布局 2.浮动布局(左右安置) 3.层级布局(定位)

1.5.实现元素的垂直水平居中

（相对）父元素设置parent{position:relative; } (绝对）子元素设置child{ position:absolute; left:50%; top:50%; margin-left:-50%*child*width; margin-top:-50%*child*height; }

1.6:CSS样式的几种引入方式

外部样式表内部样式表（位于标签内部）p{color:pink; font-size:16px}内联样式（在 HTML 元素内部）hello world //给同一选择器设置同一样式,离元素近的样式设置方式优先级高

2拓展day04的知识点

2.1 p:margin的一点漏洞问题

给子元素margin-top:父元素移动,子元素不移动解决方案：1.给父元素overflow:hidden; 2.给父元素设置伪元素parent:before{content:'‘”; display:table}

上面的元素的margin-bottom和下面元素的margin-top会重合 //取两者的最大值

2.2一个登陆页面

文本 //文本特殊人员的照顾，指引 //"text"这个是input对话框的文本属性密码 //"password"这是input对话框的密码属性 //"submit"是input按钮的属性，value更改名 //定义和用法标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。标签的 for 属性应当与相关元素的 id 属性相同。

2.3单选框

男女

2.4复合选框

爱好游泳开车

2.5下拉选框

2.6预选的下拉选框

//在想要的option上加selected这个属性

2.7文本域

文本域 *****拓展空格 <<>>

特殊案例 1.input 输入框

input type=”text” type=”submit”之间的区别一个文本是content box，一个按钮是border box

2.display和visibility的区别

display:none; //块不存在 visibility:hidden; //只是隐藏起来了

3.讲解登录框下面的几个icon

文章图片
image.png

//是背景图片的取图定位，左负右正background-position: -18px 0

B我掌握了的 1.1 p:margin的一点漏洞问题

给子元素margin-top:父元素移动,子元素不移动解决方案：1.给父元素overflow:hidden; 2.给父元素设置伪元素parent:before{content:'‘”; display:table}

上面的元素的margin-bottom和下面元素的margin-top会重合 //取两者的最大值

1.2一个登陆页面

文本 //文本特殊人员的照顾，指引 //"text"这个是input对话框的文本属性密码 //"password"这是input对话框的密码属性 //"submit"是input按钮的属性，value更改名 //定义和用法标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。标签的 for 属性应当与相关元素的 id 属性相同。

1.3单选框

男女

1.4复合选框

【day05】爱好游泳开车

1.5下拉选框

1.6预选的下拉选框