html+css基础知识整理

/盒模型:1:所有标签皆为盒子;
2:盒模型渲染在浏览器区域的计算:++++++++
padding一定会改变盒子在浏览器中渲染区域的大小;
⁃ padding的颜色和盒子设置的背景色相同;
/
/1:margin:盒子设置margin之后,代表盒子的margin值的范围内不允许再有其他盒子出现;
当盒子是嵌套关系时:子级的margin-top会传递给父级。导致父级随着子级一起向下移动。
/
/*背景图的位置:
background-position:center;
background-position;top; bottom right
background-position: right-bottom */
/overflow:hidden;超出盒子的内容隐藏/
/overfl:visible;默认值,超出部分可见/
/overflow:scroll;强制给元素添加滚动条/
/font-size:10px;设置字体大小/
/color:red;设置字体颜色;/
/font-family:楷体;–设置字体类型/
/text-align:center文字水平方向居中/
/line-height:100px;文字垂直方向居中----前提文字只有一行,可以设置行高与盒子的高相同。/
/text-indent:40px;首行文字缩进/

/一个值时:代表上下左右内边距/
padding: 50px;
/两个值时:(上下) (左右) 内边距/
padding: 10px 50px;
/三个值时:(上) (左右) (下) 内边距/
padding: 5px 50px 20px;
/四个值时:(上) (右) (下) (左) 内边距 (顺时针方向)/
padding: 10px 20px 30px 40px;
/一个值时:代表上下左右外边距/
margin: 10px 20px;
/两个值时:(上下) (左右) 外边距/
margin: 10px 20px 30px;
/三个值时:(上) (左右) (下) 外边距/
margin: 10px 20px 30px 40px;
/四个值时:(上) (右) (下) (左) 外边距 顺时针方向/
/class选择器编写格式;.+选择器名字+{代码段}/
/class选择器的优先级要高于标签选择器/
/id选择器编写格式:#+选择器名+{代码段}/
/id选择器的优先级>class选择器优先级>标签选择器优先级/
id选择器的优先级>class选择器>标签选择器*/

/父级不设置边框,子级会将margin-top传递给父级,所以父级要用padding来设置/


/选择器之间以逗号隔开,代表同时选中这些选择器,给它们设置共同的样式/
/*hover:代表鼠标悬停在该标签上时,
设置该标签的样式属性;
用法:1:设置鼠标悬停在某个标签上时,该标签或该标签的子级发生样式变化
2:选择器1:hover 选择器2{样式}
选择器2对应的标签一定是选择器1对应标签的子级,选择器2不写时,代表对选择器1设置样式
3:兄弟标签之间不能通过hover关联起来设置样式,例如: .div1和.div2是兄弟标签
.div:hover .div2{
样式;
}这种写法是非法的。
4;通过父级关联hover给子级设置样式时,需要单独给每个子级都设置样式,不能使用群组的方式,
进行hover效果的设置;
5:通过父级给子级设置hover时,每个子级也属于父级的一部分,因此鼠标停在子级上,等同于悬停在父级上。
*/
/宽度百分比是相对于父级定位设置的/


  
   
   
        

/z-index:设置同级兄弟元素之间的在垂直于浏览器平面方向上的显示优先级。
值没有单位,可以是任意一个整数,值越大显示优先级越高,必须设置
该属性,以保证渲染结果正确显示。
另外,子级z-index受父级z-index限制,不同父级的子级之间进行z-index比较时,
只跟他们父级z-index值大小有关,跟子级的z-index大小无关。
/




/table构成和样式:
1:构成:
table>语义化标签设置外框
table row用来划分表格中的一行的标签
table data 表示用来存放数据的元素的单元格默认是文字据左的状态
table head 表示用来做标题元素的单元格:
其中文字会加粗,并且居中。

创建表格,划分行,
创建单元格来决定列数;
2:样式:
2.1:table-collapse:collapse可以消除每个单元格之间的间隙;
2.2border:"";按级别设置表格边框的大小,没有单位
2.3:无论表格是否有固定宽度,td ,th 的margin属性都失效
2.4;表格一旦生成,一定会按行列对齐,如果需要错行或者错列对齐,只能通过行合并或者列合并来完成。
并且单行的高度是由所有元素中高度最高的那个决定;
单列的宽度是由本列中宽度最宽的元素决定;/
/border-collapse:collapse;用来设置每个单元格之间的边界坍塌为1条边界,默认值:separate/
table表格:
tr:table row 行
td:table data 数据 列
th:table head 标题
colspan:设置的是横跨了几列; -->






响应式布局:顾名思义就是根基页面宽高的不同,为页面设置不同的样式效果;
实现方式:采用媒体查询技术来完成:@media媒体查询用用愈发结构:
1:内嵌在样式表(内部样式表,外部样式表)@media only screen and (条件一) and (条件二)
and(样式表)
内嵌在样式表中的媒体查询必须写在初始样式的后面
2:写在link标签中:

表示在条件满足时引入样式表,引入媒体查询的样式表当写在原样式表之后;
3:由于内部样式表的优先级要高于外部样式表,因此为了保证响应能够成功被执行,必须保证外部引入
样式表中设置的样式,在内部样式表中不存在。
@media only screen and (max-width:1500px) and (min-width:1300px){
–>


                    

你可能感兴趣的:(css定位,float,position,css属性)