1.优先级
每种选择器都有一个权重值,权重值越大,优先级越高;权重值一样的谁后写谁的优先级就高
标签选择器:000(1)
class选择器:0010(2)
id选择器:0100(4)
群组选择器:单独看每个选择器的权重
后代选择器:每个单独的选择器的权重和
内联样式器的优先级永远最高
2.标准文档流
css主要用来对网页中的内容进行布局和设置样式.
1 标准流: 网页中的内容在没有写样式的 时候,默认的布局样式,叫标准流,在标准流中不同的类型的标签布局方式不一样:
a.如果是块标签,一个标签占一行(无视宽度),默认的宽度是父标签的宽度,并且设置宽度和高度有效
b.如果是行内标签,一行可以显示多个,默认宽度和高度都是内容的宽度和高度.设置宽度和高度无效
c如果是行内块标签,一行可以显示多个,默认的宽度和高度都是内容的宽度和高度,设置宽度和高度无效.
2.标签的默认分组
块级标签:h1~h6,p,table,ol,il,dl,li,div...
行内标签:font,input,img,a,select,textarea,span...
3.display属性
display属性代表的是标签的类型:
1,block:块标签
2.inline:行内
3.inline-block:行内块
默认情况下,我们的标签只有行的和块的,没有行内块.可以通过修改display属性来修改标签类型.
注意:使用行内块的时候,有一个没有办法修复的坑.行内块到其他标签之间有一个间隙,而且这个间隙不能消除.所以不到万不得以不使用行内块
5.浮动(float):
left:左浮动 - 先上再左
right: 右浮动-先上再右
1.浮动会脱标(脱离标准流) - 之前标准流中的布局方式无效;
脱离标准流布局方式:所有标签都可以一行显示多个,默认大小是内容的大小,设置宽高有效
2.浮动
布局原则,努力的向浏览器的左上角靠,先上再左.
文字环绕
被文字环绕的标签浮动;文字对应的标签不浮动,会自动环绕浮动标签显示..
6.清除浮动
1.高度塌陷
指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动,子标签就会产生高度塌陷问题
2.清除浮动
a.添加空盒子 - 在会塌陷的父标签中的最后添加一个空的fiv,并且设置这个空的div的样式的clear为both
b.overflow - 选中高度塌陷的标签,设置样式的overflow的值为hidden
c.万能清除法 - (百度)
7.定位
1.定位属性
left - 标签的左边到指定位置的距离(左间距)
right - 标签的右边到指定位置的距离(右间距)
top - 标签的顶部到指定位置的距离(上间距)
bottom - 标签的底部到指定位置的距离(下间距)
2.position属性 - 设置标签定位的时候的参考对象
initial/static()默认值 - 不相对任何对象定位
absolute(绝对定位) - 相对于第一个非initial/static父标签定位
relative(相对定位) - 相对当前标签在标准流中的位置进行定位
(注意:一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对于自己定位)
fixed - 相对于浏览器进行定位;
sticky - 当网页中的内容超过一屏时,相对于浏览器定位;
当网页中的内容没有超过一屏时(不需要滚动),相对标准流的位置进行定位;(注意:一般只针对最后一个标签)
注意:定位也会让标签脱标 - 不管如何,标签都是按脱流的方式进行布局(一行显示多个,设置宽高有效,默认大小是内容的大小)
8盒子模型
html中所有在网页上可见的标签都是盒子模型,有固定的结构,
所有可见的标签都是由:conten oadding border和margin组成,其中内容
margin不可见
1.content -
a.设置width和height就是在设置content的大小;
b.标签中添加内容也是添加到content中的
c.设置背景颜色,会作用于content
2.padding -
a.通过padding相关属性设置padding的大小(4个方向)
b.设置背景颜色,会作用于padding
3.border(边框) -
a.通过border相关属性设置border的大小(4个方向)
b,边框的颜色需要单独设置
4.margin
a.通过margin相关属性设置margin的大小
b.不可见,但是占位
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div{
/*1.设置content的大小*/
width: 100px;
height: 100px;
background-color: sandybrown;
/*2.设置padding大小*/
/*a.同时给4个边添加padding*/
/*padding: 20px;*/
/*b.分别给不同的边添加padding*/
padding-left: 20px;
padding-top: 30px;
/*3.border*/
/*a.同时给4个边添加border
* border: 宽度 样式 颜色
* 样式 - solid(实线)/dashed(虚线)/dotted(点划线)/double(双线)
*/
/*border: 6px dashed slateblue;*/
/*b.单独设不同边的边框*/
border-left: 3px solid darkblue;
border-top: 3px dashed yellowgreen;
/*4.margin*/
/*margin: 100px;*/
margin-left: 50px;
}
</style>
<div id="">
<a href="">python</a>
</div>
姓名:<input type="text" name="" id="" value="" style="padding-left: 20px;"/>
</body>
</html>
网友评论