csss的定位详解

/*css基础*/ HBuilder快捷键, li*3 按tab快速生成 div>ul>li*5 按tab快速生成 div+div 按tab生成连个div ul>li{我要自卸王$}*5 按tap键 #ee 颜色 重要:重置html默认样式很重要,有些好的reset.css,直接引入即可 css中以-moz,-ms,-webkit,-o开头的样式的含义 -moz代表baifirefox浏览器私有属性； -ms代表IE浏览器私有属性； -webkit代表chrome、safari私有属性； -o代表Opera私有属性。 html标签是可以继承css属性的 1.选择器(选择符) 别的选择器都可以用基本选择器组合成 1.元素(基本)选择器:标签选择器,通用选择器 ,类选择器,id选择器, 优先级:id选择器>类选择器>标签选择器 标签选择器 标签名{} id选择器 #id名{} 类选择器 .类名{} 通配符选择器 *{} /*选择所有元素 一般用来清除内外边距，便于统一管理和设置*/ eg: *{ margin: 0px; padding: 0px; } 2.关系选择器:包含选择器(E F),子选择器(E>F),相邻选择器(E+F),兄弟选择器(E~F) 包含(后代选择器,嵌套选择器)选择器(E F):选择所有被E元素包含的F元素(就是选择E里面的所有F元素) eg:ul li{background-color: red;} 子选择器(E>F):选择元素E下的子元素F 只能选择子元素,不能选择到孙子元素 eg:ul > li{background-color: red;} 相邻选择器(E+F):选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。 相邻选择器和兄弟选择器的区别:相邻选择器只能选择一个紧紧相邻的同级别的元素,而兄弟选择器可以选择多个同级别的选择器 eg:li+li{background-color: red;} 兄弟选择器(E~F):选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。 eg:li~li{background-color: red;} 3.属性选择器: 规定:att是css的属性,val是属性值 种类: E[att]:选择具有att属性的E元素。 E[att='val']:选择具有att属性且属性值只等于val的E元素,注意这样的不能选中 class="a b"，这能选中class="a"这样的 E[att~='val']:选择具有att属性且属性值为一用空格分隔的字词列表 eg:能选中这样的class="a b" E[att^='val']:选择具有att属性且属性值为以val开头的字符串的E元素。 eg:

abc

ac

div[class^='a']{background-color: red;}选中字符串a开头的div E[att$='val']:选择具有att属性且属性值为以val结尾的字符串的E元素 eg:

1

2

3

E[att*='val']:选择具有att属性且属性值为包含val的字符串的E元素。 eg:

1

2

3

E[att|='val']:如果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。 eg:

0

1

2

3

4.常用选择器:并集(分组选择器)选择器,交集选择器 并集选择器:E,F{} 同时选择E和F元素 E和F可以是基本选择器,用','隔开,除了通配符选择器 eg:ul,p{background-color: red;} 交集选择器:EF{} 选择满足E和F条件的元素 E,F不可以用id选择器 E和F之间没有任何符号和空格 eg:.txt.ext{color: red;} /*选择class="txt ext"的标签*/ 5.伪类选择器:CSS伪类是用来添加一些选择器的特殊效果。 伪类:元素不同状态表现不同样式 选择器使用":" 如:链接元素访问前和访问后是不同的样式 伪对象(伪元素):文档结构中没有的元素 选择器使用"::" 1.用于超链接的四个伪类选择器: E一般是a标签 E:link,E:visited,E:hover,E:active 超链接状态顺序 必须按顺序写：a:link {} a:visited {} a:hover {} a:active {} 注意:link和visited只能用于a标签 E:link:设置超链接a在未被访问前的样式 初始状态 E:visited:设置超链接a在其链接地址已被访问过时的样式 访问完了的状态 E:hover:设置元素在其鼠标悬停时的样式 鼠标悬停状态 应用很广 E:active:设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式 点击状态 eg: a:link{color: yellow;} /*初始文字颜色*/ a:visited{color: red;} /*访问完了的文字颜色*/ a:hover{color:black;} /*鼠标悬停链接上文字的颜色*/ a:active{color: blue;} /*点击和释放之间文字的颜色*/ 一般link和visited设置相同样式,hover和acitve设置一样的样式 2.焦点伪类选择器 E:focus:设置对象在成为输入焦点时的样式。前提是E必须能获得焦点 eg:input:focus{color: red;} 3.否定伪类选择器 E:not(s):匹配不含有s选择符的元素E。 eg: 给该列表中除最后一项外的所有列表项加一条底边线 li:not(:last-child) { border-bottom: 1px solid #ddd; } 4.根选择器 E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML eg:html:root{color: red;} /*给html设置默认颜色red*/ 5.孩子选择器 E:first-child,E:last-child,E:only-child,E:nth-child(n),E:nth-last-child(n) E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-last-of-type(n) E:first-child:匹配E的父元素的第一个子元素E。注意E必须是E的父元素的所有子元素中的第一个孩子,要想使用这个选择器 E:last-child:匹配E的父元素的最后一个子元素E。注意E必须是E的父元素的所有子元素中的最后一个孩子,要想使用这个选择器 应用:1.一般用于修改列表的第一个或者最后一个列表项的样式 2.有多个重复的相同的标签时,设置首位不同样式时使用 注意:E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素 eg: p:first-child{color:#f00;}

我是一个p

/*p标签内的文字变红了*/ eg: p:first-child{color:#f00;}

我是一个标题

我是一个p

/*选择器失效了,因为p不是div的第一个孩子*/ 注意(*-of-type都通用):要使下面这几个属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body E:first-of-type:该选择符总是能命中父元素的第1个为E的子元素，不论父元素的第1个子元素是否为E 1.注意和E:first-child的区别 eg:

我是一个div元素

我是一个p元素

我是一个p元素

E:last-of-type:该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E eg:

我是一个div元素

我是一个p元素

我是一个p元素

E:nth-of-type(n):该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E E:nth-last-of-type(n):该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E 6.其他一些重要的选择器 1.E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) eg:

选中下面的项试试

• 蓝色
• 红色
• 黑色

选中下面的项试试

• 蓝色
• 红色
• 黑色

2.E:enabled:匹配用户界面上处于可用状态的元素E 匹配enabled的输入框 E:disabled:匹配用户界面上处于禁用状态的元素E 匹配disabled的输入框 应用:针对表单的输入框之类的,因为输入框具有disabled属性和enabled属性 3.E:target,@page:firsr,@page:left,@page:right 略 6.伪对象选择器 很重要常用 伪元素不会改变网页结构,因为伪元素不构成网页结构 1.E:first-letter/E::first-letter:选择每个E元素的第一个字母或文字 经常用于杂志第一个字下沉 注意:大括号和E:first-letter之间有空格 p:first-letter {} 应用:此伪对象常用于块级元素(行级元素要转成块级元素才能使用),经常用来配合font-size和float属性制作首字下沉效果 eg:

杂志常用的首字下沉效果

今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。

2.E:first-line/E::first-line:选择每个E元素的第一行 注意:1.此对象用于块级元素,行级元素必须使用display:block后才能使用该伪对象 2.大括号和E:first-letter之间有空格 E:first-line {} 3.E:before/E::before:在每个E元素内容之前插入内容 不影响网页结构 4.E:after/E::after:在每个E元素内容之后插入内容 after必须和content属性一起使用 重点 注意：before和after必须和content属性一起使用,content属性里面写要添加的内容 可以为伪元素设置css样式 before和after使用content添加地内容是行级元素 eg:

• 我要自学网1
• 我要自学网2
• 我要自学网3
• 我要自学网4
• 我要自学网5

eg:

This is a heading

The :after pseudo-element inserts content after an element.

This is a heading

注意:仅当!DOCTYPE 已经声明 IE8支持这个内容属性.

5.E::placeholder:设置对象文字占位符的样式 eg:input::placeholder{color:green;} 6.E::selection:设置对象被选择时的样式(文字被选择就是右键鼠标移动) 注意:::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性) eg:p::selection{color:red;}

dsfaadf

2.三种使用方式 文件引入 ,head头处引入,行内引入 3.文本样式 文本不等同于文字,还包括行级元素和行内块级元素 ,字体样式,行样式 text font line (关键字) 颜色: color:颜色值; 文本居中,左对齐,右对齐 text-align:center left,right; 垂直居中:line-heigh:与文本元素高度值一致; 文本属性(text-)和字体属性(font-) 1.文本对齐: text-align vertical-align text-align属性规定元素中的文本的水平对齐方式 属性值：none,center,left,right,justify(两端对齐,文字会出现在两端) vertical-align属性规定元素中的文本垂直对齐方式 对行内元素,行内块级元素,表格元素有效(常用) 属性值:baseline 默认值对齐父元素的基线 sub对齐下标 super:对齐上标 top:文本和文字顶部对齐 bottom:底部对齐 middle:居中对齐 2.文本颜色: color(设置文本颜色) 合法颜色值:颜色名 16进制颜色值 RGB颜色值 RGBA颜色值, opacity(设置颜色的不透明度 0是完全透明 1是不透明 取值范围0.0-1.0之间) 3.文本修饰: text-decoration === text-decoration-line, text-decoration-color(指定文本装饰的颜色), text-decoration-style(指定文本装饰的样式), text-decoration(是老版本的文本修饰,text-decoration-line是新版本的):主要用来删除链接的下划线 等价于 text-decoration-line 指定文本装饰的种类 text-decoration:none 删除链接的下划线 属性值:none(默认),underline(下划线),line-through(横穿文字的线)，inherit(继承父元素的text-decoration属性的值) 或者直接写 text-decoration:#f00 solid underline; 用这个建议,因为简单 text-decoration-color:定义文本修饰线的颜色 text-decoration-style:定义文本修饰线的样式 属性:solid：实线 double：双线 dotted：点状线条 dashed：虚线 wavy：波浪线 3.文本阴影text-shadow:设置元素中文字的阴影效果 可以设定多组效果，每组参数值以逗号分隔。多组阴影特殊效果 Demo: 火焰文字 霓虹文字 属性:none：无阴影 text-shadow:值1 值2 值3 值4; 值1:水平阴影位置 必须写的属性值 正值时,阴影在右,负值时,阴影在左 值2:垂直阴影位置 必须写的属性值 正值时,阴影在下,负值时,阴影在上 值3:阴影模糊距离 可选参数 值4:阴影颜色 可选 默认和文字颜色一样 eg:给文字添加模糊效果 p{ text-shadow: 0px 0px 2px red; } eg: text-shadow:1px 1px 0.1px red; 4.行高:如果行高的高度等于盒子的高度，可以使本行文本垂直居中，仅适用单行文本 应用:使行级元素垂直居中 line-height：就是行高的意思，指的是一行的高度 默认是normal line-height:100px 一般把heigth和line-heigth设置成一样,表示垂直居中 取值:normal,尺寸单位,数字(按照font-size的倍数设置行高),百分比(按照当前字体尺寸的百分比设置行高) 行高 line-height:用于设置文本垂直居中 　　　　 1.针对单行文本垂直居中 　　　　 针对单行文本垂直居中公式：行高的高度等于盒子content区域的高度(即height),可以使当行文本垂直居中， line-height = height 注意只适用单行文本。 　　　　 2.针对多行文本垂直居中 　 　行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。 　　 第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字， 假如是5行，再看一下行高，如果行高是line-　　　　　　 height:30px; 那么就知道行高*5=150px 　　 第二步，让(盒子的高度-150px)/2=75; 那么设置盒子的padding-top:75px; 同时保证盒子的高度为300px,那么高度改为225px; 5.文本转换: text-transform 文本转换属性是用来指定在一个文本中的大写和小写字母。 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。 属性值: uppercase(将每个单词转换成大写),lowercase(将每个单词转换成小写),capitalize(将每个单词的第一个字母转换成大写) none：无转换, 6.字间距: letter-spacing 了解即可 直到letter是字的意思即可 可以设置负值,%,px,em 属性值:normal 7.首行缩进: text-indent属性规定文本首行缩进的距离, 单位使用em(当前文字的尺寸) text-indent:只能用于文本首行缩进距离,默认值是0 eg:p{ text-indent: 2em;//首行缩进两个汉字尺寸 text-indent: 1em;//首行缩进一个汉字尺寸 } 字体属性: 1.字体大小(字号): font-size 单位可以用:px,em,rem,% font-size表示设置字体的大小,如果设置成inherit表示继承父元素的字体大小值 属性值是字体大小 eg: font-size:100px 2.字体粗细: font-weight font-weight表示设置字体的粗细 属性值:none(默认值，标准粗细)|bold(粗体)|border(更粗)|lighter(更细)|100-900(设置具体粗细，400等同于normal,700等同于bold)|inherit(继承父元素的字体粗细值) eg:font-weight:100; 注意没有单位 3.字体系列: font-family 计算机的 C://windows/Fonts 里面右本计算机的所有下载的字体 font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif,"宋体" 如果浏览器不支持第一个字体会尝试下一个字体，直到找到能支持的字体为止 4.字体样式(风格): font-style font-style: 字体; 属性值: italic:斜体 oblique:表示中间状态的倾斜 没有italic倾斜 normal:正常字体样式 经常用来重置字体 重置字体样式: 1.给i标签和b标签,清除字体样式 这样多了两个无样式标签 i,b{font-weight: normal;font-style: normal;} 5.书写模式: dirction: 检索或设置文本流的方向 属性值: ltr(left to rigth)：文本流从左到右。 rtl(right to left)：文本流从右到左。 eg: dirction:rtl;unicode-bidi:bidi-override; 注意从右到左必须加 unicode-bidi:bidi-override;否则默认无效 unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用 属性值:默认值是 normal normal：对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。 embed：对象打开附加的嵌入层，<' direction '> 属性的值指定嵌入层，在对象内部进行隐式重排序。 bidi-override：严格按照 <' direction '> 属性的值重排序。忽略隐式双向运算规则 writing-mode:设置或检索对象的内容块固有的书写方向 适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素 属性值: 注意:此属性效果不能被累加使用。例如，父对象的此属性值设为 tb-rl ，子对象再设置该属性将不起作用，仍应用父对象的设置。 horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb) vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl) vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right lr-tb：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE) tb-rl：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的(IE) eg:导航栏实例 float表示浮动

• 导航
• 导航
• 导航
• 导航
• 导航
• 导航

4.背景样式 背景图片的添加一般在body标签上面添加 背景颜色:background-color:颜色值; 背景图片:background-image:url("路径"); 背景图片平铺效果 x轴,y轴,不平铺,默认值是在x,y方向上都平铺(repeat):平铺 <==> 重复出现 background-repeat: repeat-x; /*x方向上平铺 y方向上平铺 不平铺 x,y方向上都平铺 从父级元素继承*/ background-repeat: repeat-y; background-repeat: no-repeat; background-repeat: repeat; inherit：规定应该从父元素继承background-repeat属性的设置。 background-repeat: inherit; 背景图片定位:background-position:x轴,y轴; background-position：属性设置背景图像的起始位置，这个属性设置背景原图像的位置。 属性值: ：用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小 ：用长度值指定背景图像填充的位置。可以为负值。 center：背景图像横向和纵向居中。 left：背景图像在横向上填充从左边开始。 right：背景图像在横向上填充从右边开始。 top：背景图像在纵向上填充从顶部开始。 bottom：背景图像在纵向上填充从底部开始。 eg:特殊用法 background-position:left 100px top 10px; 图片距离左边界100px,距离上边界10px 背景图片不随窗口滚动而改变: background-attachment:fixed background-attachment:设置或检索背景图像是随对象内容滚动还是固定的 属性值: fixed：背景图像相对于窗体固定。 scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。(CSS3) 注意： background-origin和background-clip之间的区别 background-origin:设置背景图片从哪个位置开始绘制,但最终是否显示由background-clip决定 属性值:默认值 padding-box padding-box: 从padding区域(含padding)开始显示背景图像。 border-box: 从border区域(含border)开始显示背景图像。 content-box: 从content区域开始显示背景图像。 eg： background-origin:border-box; background-origin:padding-box; background-origin:content-box; background-clip:设置背景图片的哪个部分可以显示,默认是 border-box 属性值:注意,剪裁仅限于本盒子 padding-box： 只示padding(包括padding)里面的背景 别的地方的背景剪掉 border-box： 只显示border(包括border)里面的背景 别的地方的背景剪掉 content-box： 只显示content(包括content)里面的背景 别的地方的背景剪掉 text：从前景内容的形状(比如文字)作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit background-size:设置背景图片的尺寸大小 属性值: 默认值auto ：用长度值指定背景图像大小。不允许负值。 ：用百分比指定背景图像大小。不允许负值。 auto：背景图像的真实大小。 cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 注意: 该属性提供2个参数值(特性值cover和contain除外)。 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。 一种简化用法: 属性值顺序随机,想怎末设置就怎末设置 background:red,url(../img/68AFE76E2C1BE146D0B0E10C3F52E81B.jpg),no-repeat,fixed, 5.行内元素和块级元素转换 块级元素和行内元素 区分; 重点 标签分两种等级:行内元素和块级元素 行内元素:(特点) dispaly:inline; 1.与其他元素并排,可以和其他元素呆在一行 2.不能设置宽高 行级元素的宽高由元素内容的宽高决定 块级元素:(特点) display:block; 1.能独占一行 2.能设置宽高,如果不设置,默认宽度和父级元素宽度一样 高度由元素内容的高度决定 行内块级元素:(特点) display:inline-block; 1.可以和其他元素呆在一行 2.可以设置宽高 当没有设置宽高时,宽高由元素内容决定 eg:img 块级元素和行内元素的分类： 　　在HTML的角度来讲，标签分为： 　　　　1.文本级标签：p , span , a , b , i , u , em 　　　　2.容器级标签：div , h系列 , li , dt ,dd 　　　　p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。 　　从CSS的角度讲，CSS的分类和上面的很像，就p不一样： 　　　　1.行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。 　　　　2.块级元素：所有的容器级标签，都是块级元素，以及p标签。 块级元素可以嵌套块级元素和行内元素,行内块级元素 行级元素只能嵌套行级元素和行内块级元素 p,h标签是特例是块级元素,但是不能嵌套块级元素 行内元素和块级元素的转换: 将行内元素转化为块级元素:display:block; 将块级元素转换为行内元素:dispaly:inline; 6.盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 您指定一个CSS元素的宽度width和高度height属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距 盒子模型 margin(外边距) outline(轮廓,这个可以设置,位于border的外面为了标识) border(边框) padding(内边距) content(内容)里面用来放文本,图像,视频等内容 --------- 重点 盒模型属性: 盒子模型图片见 img/盒子模型图片.png 1.width:内容的宽度 2.height:内容的高度 3.padding:内边距,边框到内容的距离 4.border:边框,指的是盒子的宽度(盒子形状的线) 5.margin:外边距,盒子边框到附近最近盒子的距离 盒子模型的计算： 　　1.盒子的真实宽度=width+2*padding+2*border*2 　　2.盒子的真实高度=height+2*padding+2*border*2 　　3.所以，标准盒模型，width不等于盒子真实宽度， 如果要保持盒子的真是宽度，那么加padding就一定要减width,减padding就一定要加width。 真实的高度同样这样设置。 padding(内边距或填充)： 属性: padding:在一个声明中设置四个方向的所有填充属性 padding-bottom:设置元素的底部填充 padding-left:设置元素的左部填充 padding-right:设置元素的右部填充 padding-top:设置元素的上部填充 属性值: length 定义一个固定的填充(像素, pt, em,等) % 使用百分比值定义一个填充 　　1.padding:就是内边距的意思，是边框到内容之间的距离。 　　2.padding的区域是有背景颜色的，并且背景颜色和内容的颜色一样， 也就是说background-color这个属性将填充border以内的所有区域。 4.一些标签默认有padding: 比如ul标签，有默认的padding-left值。 那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。 以便于我们更好的去调整元素的位置。 我们现在初学可以使用通配符选择器 *{ padding:0; margin:0; } But，这种方法效率不高。 所以我们要使用并集选择器来选中页面中应有的标签 (不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css) https://meyerweb.com/eric/tools/css/reset/ border:边框,就是盒子的边框 1.边框border有3个要素:线宽(border-width),线型样式(border-style),颜色(border-color) border:代表四个方向的边框 border-top border-right border-bottom border-left border-style:设置边框样式 属性值: none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。 效果取决于边界的颜色值 border-width:设置边框宽度 border-color:设置边框颜色 必须和border-style一起使用才有意义 border可以设置上右下左的样式 border-top,border-right,border-bottom,border-left 他们四个都有边框的三个属性 eg: border-top-color 2.如果颜色不写,边框默认是黑色。如果粗细不写，不显示边框。 如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。 3.设置圆角边框 border-radius 重点 border-radius border-上下-左右-radius 圆角边框属性: 1.圆角方向:通过垂直和水平方向可以表示一个角 方向1:表示上下 只能是上下 方向2:表示左右 只能是左右 eg:border-top-left-radius:; 设置右上角为圆角边框 2.圆角半径:写一个半径表示的是园 另一个半径2和1默认相同 半径1:水平半径 半径2:垂直半径 eg:border-bottom-left-radius:10px; 设置右下角为圆角边 3.当使用百分比设置半径1和半径2 可以设置各种形状 实际情况:园,椭圆都是这样设置的 百分比用的是盒子水平/垂直长度的百分比 eg:border-radius:50% 50%; 如果盒子宽高一样,那麽这是一个圆 eg:border-radius:50%; 园 同理可以设置椭圆 eg:

djsfaj

4.border-radius 同时设置四个园角的边框半径 形式1:border-radius:左上半径 右上半径 右下半径 左下半径 (符合上右下左) 形式2:border-radius:半径 设置四个圆角半径一样 border-radius: 10px; /*设置边框的四个边角 圆的半径*/ 4.边框阴影:可以是图片或者背景更有立体感 box-shadow 文本阴影:text-shadow box-shadow:值1 值2 值3 值4 值5; 值1:水平阴影位置,必须有的参数 正值时,阴影在右边,负值时,阴影在左边 值2:垂直阴影位置,必须有的参数 正值时,阴影在下边,负值时,阴影在上边 值3:阴影模糊距离 可选值 值4:阴影尺寸, 可选值 值5:阴影颜色,合法颜色值,可选 默认黑色 eg:

outline:轮廓属性(也叫外边框),是绘制于元素周围的一条线,位于边框(border)边缘的外围,可起到突出元素的作用 应用:可以用来取消input和textarea等输入框的outline样式,因为太丑了 原来点击input边框外面会变黑 outline:在一个声明中设置所有的外边框属性 outline:none; 取消outline样式 eg:input{outline: none;} 注意:属性和border用法一样,但是不同的是outline没有outline-left这类单独表示方向的属性 outline-color outline-style outline-width margin:外边距(表示本边框到其他盒子的最近距离),5个属性 属性: margin:在一个声明中设置所有外边距属性 margin-bottom:设置元素的下外边距 margin-left:设置元素的左外边距 margin-right:设置元素的右外边距 margin-top:设置元素的上外边距 属性值:margin可以使用负值，重叠的内容。 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的margin(使用像素，pt，em等) % 定义一个使用百分比的边距 margin: 20px auto; 使盒子居中,并且和上右下左的边界距离为20px 注意：前面写几个值,表达的含义不一样,https://www.php.cn/manual/view/33005.html margin:像素值 auto; 像素值是距离上下左右边界的 设置元素居中对齐 条件:此元素必须为块级元素,而且必须有宽高; margin:20px,auto; 和上边界距离为20px,元素居中对齐 6_1.css的尺寸 属性: height:设置元素的宽度 line-height:设置行高 max-height:设置元素的最大高度 max-width:设置元素的最大宽度 min-height:设置元素的最小高度 min-width:设置元素的最小宽度 width:设置元素的宽度 6.元素定位: 详见博客 position:指定元素的定位类型 使用left,rigth,top,bottom确定位置 eg:元素距离左边距离left 如果display设置为none,那末float及position属性定义将不生效； position的属性值: 1.静态定位(static):所有元素的默认定位方式 元素不可以改变位置 要想元素可以改变位置定位不许设置成absolute,relative,fixed 注意:1.HTML元素的默认值,即没有定位,元素出现在正常的文档流中。 2.静态定位的元素不会受到top, bottom, left, right影响 其他定位都收他们四个属性影响 2.绝对定位(absolute):可重叠,通过z-index控制, position: absolute; 注意: 1.绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于定位 2.absolute定位使元素的位置与文档流无关,因此不占据空间。 3.absolute定位的元素和其他元素重叠。 eg:绝对定位可以设置重叠的样式

One

Two

Three

Four

3.相对定位(relative):相对定位元素不可层叠。依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。 相对定位元素经常被用来作为绝对定位元素的容器块。 注意：绝对定位和相对定位的区别,绝对定位是相对于父亲或者祖先的,而相对定位是相对于原本自身应该在在的位置的定位 eg:

One

Two

Three

Four

4.固定定位(fixed):固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。 固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。 5.粘性定位(sticky):很有用 position:sticky;基于用户的滚动位置来定位 粘性定位的元素是依赖于用户的滚动,在postion:relative和position:fixed定位之间切换 eg:

尝试滚动页面。

注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。

我是粘性定位!

滚动我

来回滚动我

滚动我

来回滚动我

滚动我

来回滚动我

6.重叠的元素 z-index搭配 position:absolute;一起使用,因为只有绝对定位支持元素重叠 z-index属性指定了一个元素的堆叠顺序(哪个元素放在前面,哪个元素放在后面) 属性值:number(可正可负),auto,inherit 元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 注意: 如果两个定位元素重叠,没有指定 z-index,最后定位在HTML代码中的元素将被显示在最前面。 eg:

This is a heading

因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。

eg:

z-index:1

z-index:2

z-index:3

7.界面布局 dispaly: 太强大了 作用:1.块级元素和行级元素转换 块级变行级:display:inline; 行级变块级:display:block 2.隐藏对象但是不占据物理空间 display:none; 3.设置元素变成表格之类的 p{display: inline;} span{display: block;} css中所有的浮动属性 float:设置浮动,clear:清除浮动 元素的水平方向浮,意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 几种重要应用: 1.如果图像是右浮动,下面的文本流将环绕在它左边 eg:

在下面的段落中，我们添加了一个 float:right 的图片。导致图片将会浮动在段落的右边。

这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。 这是一些文本。这是一些文本。这是一些文本。

2.彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 eg:

图片库

试着调整窗口,看看当图片没有足够的空间会发生什么。

3.创建一个没有表格的网页,使用float创建一个网页页眉、页脚、左边的内容和主要内容。 eg:

• 主页
• 新闻
• 联系我们
• 关于我们

• The Flight
• The City
• The Island
• The Food
• The People
• The History
• The Oceans

The City

Chania

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

You will learn more about responsive web pages in a later chapter.

底部文本

float: 用于浮动布局(元素挨着),指定一个盒子(元素)是否可以浮动 注意: 1.css的float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。 float(浮动),往往是用于图像,但它在布局时一样非常有用 属性值: left:设置元素水平从左向右浮动 right:设置元素水平从右向左浮动 inherit none clear:指定不允许元素周围有浮动元素 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。 属性值: left:左边不许有浮动 right:右边不许有浮动 both:两边不许有浮动 none:无 inherit eg:clear属性指定元素两侧不能出现浮动元素,使用clear属性往文本中添加图片廊 clear:both;设置两边没有浮动 eg:

图片库

试着调整窗口,看看当图片没有足够的空间会发生什么。.

第二行

visibility:设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间 属性值: visible：设置对象可见 默认值 hidden：设置对象隐藏 占用空间 collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。 overflow:检索或设置对象处理溢出内容的方式 属性值: visible：对溢出内容不做处理，内容可能会超出容器。 hidden：隐藏溢出容器的内容且不出现滚动条。 scroll：隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。 auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。 overflow === overflow-x + overflow-y eg:

overflow 属性规定当内容溢出元素框时发生的事情。.

overflow:scroll

You can use the overflow property when you want to have better control of the layout. The default value is visible.

overflow:hidden

You can use the overflow property when you want to have better control of the layout. The default value is visible.

cursor:显示光标移动到指定的类型 属性值: url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help eg:

将鼠标移动到这些字上改变鼠标样式cursor.

auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait
8.列表 列表项标志就是列表项li前面的样式 list-style:下面三个样式的综合,使用时 list-style-image的属性值必须放在最后 eg:list-style:none;清楚列表样式 list-style-image:用图像做列表项标志。就是让每个li前面多了一个图像 属性值: none：不指定图像，默认内容标记将被 <' list-style-type '> 代替。 ：使用绝对或相对地址指定列表项标记图像。如果图像地址无效，默认内容标记将被 <' list-style-type '> 代替 list-style-position:设置列表中列表项标志的位置 属性值: outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐 inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐 list-style-type:设置列表项标志的类型 属性值: 可以设置选项 A B C D disc：实心圆(CSS1) circle：空心圆(CSS1) square：实心方块(CSS1) decimal：阿拉伯数字(CSS1) lower-roman：小写罗马数字(CSS1) upper-roman：大写罗马数字(CSS1) lower-alpha：小写英文字母(CSS1) upper-alpha：大写英文字母(CSS1) none：不使用项目符号(CSS1) armenian：传统的亚美尼亚数字(CSS2) cjk-ideographic：浅白的表意数字(CSS2) georgian：传统的乔治数字(CSS2) lower-greek：基本的希腊小写字母(CSS2) hebrew：传统的希伯莱数字(CSS2) hiragana：日文平假名字符(CSS2) hiragana-iroha：日文平假名序号(CSS2) katakana：日文片假名字符(CSS2) katakana-iroha：日文片假名序号(CSS2) lower-latin：小写拉丁字母(CSS2) upper-latin：大写拉丁字母(CSS2) 9.css媒体类型:@media 媒体类型 属性:@media规则允许在相同样式表为不同媒体设置不同的样式。 属性值: all:用于所有媒体设备 aural:用于语音和视频合成器 braille:用于盲人用点字法触觉回馈设备 embossed:用于分页的盲人用点字法打印机 handheld:用于小的手持的设备 print:用于打印机 projection:用于方案显示,例如打印机 screen:用于电脑显示屏 tty:用于固定密度字母栅格的媒体,比如终端 tv:用于电视机类型的设备 eg: .... ; 10.css响应式设计 重点 1.viewport:是用户网页的可视区域,中文叫视区 application-->手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中 设置viewport,一个常用的针对移动网页优化过的viewport meta标签如下: eg: width:控制viewport的大小,可以指定一个值,如果600,或者特殊的值devic-width设备宽度 height:控制viewport的高度 initial-scale:初始化比例,也即是页面第一次load的时候缩放比例 maximum-scale:允许用户缩放到的最大比例 minimum-scale:允许用户缩放到的最小比例 user-scalable:用户是否可以手动缩放 2.网格视图:很多网页都是基于网格设计的,说明网页是按照列来布局的 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。 11.css框架 bootstrap,layui,vue 12.css基础知识 1.常用尺寸单位 像素:px 屏幕上的一个点做单位(计算机图形学讲过) em:用元素本身的字体的font-size属性值做参考 是font-size倍数的关系 1em = font-size *1 px eg:p{width:20em;} 那么width=20*p的font-size px

dafsa

rem:依据html元素的font-size做参考 用法:可以通过修改html的font-size大小影响所有rem单位的元素大小 用于响应式开发 1rem = html的font-size*1 px 2.颜色表示和16进制颜色值 html和css规范中定义了147中可用的颜色值 1.rgb(红,绿,蓝) r:0-255 g:0-255 b:0-255 2.rgba(红,绿,蓝,透明度(0.0-1.0)) 3.16进制表示颜色方式 #rrggbb r:红色(00-ff 十六进制表示) g:绿色(00-ff) b:蓝色(00-ff) eg:红色 #ff0000 绿色 #00ff00 蓝色 #0000ff