但设置的颜料在不同浏览器中,但设置的颜色在不同浏览器中

突显的实际上低度 = height + border-top-width + border-bottom-width

CSS基础知识(颜色、伪类、盒子模型),css

6、设置颜色单位

L    普通英文单词 {color : 属性值red;}

此措施大概,便捷。但设置的颜色在不同浏览器中,可能来得的水彩出现差距

   * 三原色 – 红、绿、蓝

L   颜色的八进制情势

格式:rgb(数字,数字,数字),数字范围是0 ~ 255  r红色g绿色b蓝色

L      颜色的十六进制格局

  格式:#丁酉革命肉色褐色,范围是00 ~ FF   eg: #ff0000或#f00

7、伪类

效能:为<a>元素添加样式

:link – 设置链接元素未访问的样式          :visited
设置链接元素访问后的体裁

:hover – 设置鼠标悬停链接元素的体制       :active
设置鼠标选中链接元素的样式

* text-decoration: none;  即去掉链接元素自带的下划线

 <a>实现按钮的效用          格式:<a
href=”#”>按钮</a> 

  Eg:  a {

            text-decoration: none;   order: 1px solid lightslategrey;

            padding: 5px 10px;     background-color: lightgray;

        }

  伪元素

:before向指定元素添加第一个子元素(不是当真的子元素),通过为充分的率先个子元素设置指定的样式

:after 向指定元素添加最终一个子元素

8、盒子模型

图片 1

效率:实现HTML的页面布局     (所有HTML元素可以当作盒子)

它包括: 内容区(content)  内边距(padding)  边框(border)   外边距(margin)

i 边框(border):

border-bottom(下边框)  border-left(左边框)  border-right(右边框) 
border-top(上边框)

* 只设置边框的小幅,未设置边框的水彩和体制 – 没有其他功能

* 设置边框的幅度和颜色,未设置边框的体裁 – 没有其他功效

* 设置边框的颜料和体裁 – 边框的升幅具有一个默认值

【设置边框,必须同时安装边框宽度、颜色和样式(与各样无关) 】

格式:第一种:分别独立写;

eg:  border-width: 数字px;border-color: 颜色; border-style:样式;

其次种:合并写(简写属性);    

eg:  border:宽度 颜色 样式 ;

            盒子模型的边框对页面布局的震慑

 图片 2

彰显的实际上增幅 = width + border-left-width + border-right-width

呈现的莫过于中度 = height + border-top-width + border-bottom-width

²   边框宽度(px)

(1)分五个情景:

安装一个值:同时安装六个边框的升幅;     

安装三个值:上下边框 左左侧框;

安装多少个值:下边框 左左边框 下边框;

设置两个值:下面框 左侧框 下面框 右侧框 (顺时针方向);

(2)分几个样子

border-top-width; border-right-width; border-bottom-width;
border-left-width;

² 边框样式

none无边框;    solid实线;    double 双实线;    dashed 虚线;   
dotted点状框

² 边框颜色   border-color

* 内边距(padding)

概念:元素边框与元素内容之间的相距    [简写属性]

* 外边距(margin)

概念:边框到页面的边缘距离(不会影响因素的可见大小,但潜移默化因素地点)[简写属性]

 图片 3

要素在
HTML页面中默认是靠左靠上显得的。默认情形下,修改左外边距和上外地距时,会潜移默化当下元素的职务。

* 影响自身因素的岗位:margin-top   margin-left

* 影响相邻元素的职务:margin-right  margin-bottom

² 外边距重叠

上一个因素设置下外边距,下一个要素设置上外地距。(相邻兄弟关系)

结果:垂直方向的隔壁的异地距会生出重叠现象,则外边距会取两者中的【最大值】;

且重叠现象只会现出在笔直方向,而品位方向则不足。

釜底抽薪:只设置其中一个的外地距

² 外边距负值

下一个因素下周上外地距为负值,     结果:下一个元素会覆盖上一个元素

要素设置左外边距设为负值,则向相反方向移动     结果:当前元素移出页面

² 外边距传递

子元素设置(上外地距),此操作会传递给父元素。
解决:设置为父元素的(上内边距)

*子元素在父元素居中

(1)父元素用padding,此法会在原本大小添加内边距,改变大小

(2)子元素用margin,此法仅是反正居中

   上下居中:子元素height + 父元素padding-top =父元素height

   左右居中:子元素margin-left = (父元素-子元素)width 的一半

  • Ø 行内元素的盒子模型

行内元素设置width和height无效;且突显的小幅和冲天取决于文本内容

性能设置时:边框有效;内边距有效;外边距左右行之有效,【上下无效】;

  • Ø 盒子模型分类

box-sizing属性:

* content-box —默认盒子模型   实际的涨幅 = width + border + padding

* border-box —怪异盒子模型    实际的增长率 = width

注:原本设置的宽高,如若默认盒子模型,在原本宽度、低度的底蕴增添边框和内边距,使得宽度增大;而奇怪盒子模型,它是向里扩大,使得本来设置的增幅

http://www.bkjia.com/Javascript/1284019.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1284019.htmlTechArticleCSS基础知识(颜色、伪类、盒子模型),css 6
、设置颜色单位 L 普通英文单词 {color : 属性值red;}
此方法简单易行,便捷。但设置的水彩在不同浏…

:after 向指定元素添加最终一个子元素

L      颜色的十六进制模式

* 设置边框的颜色和体制 – 边框的涨幅具有一个默认值

缓解:只设置其中一个的异乡距

行内元素设置width和height无效;且展现的宽度和冲天取决于文本内容

i 边框(border):

  • Ø 行内元素的盒子模型

要素在
HTML页面中默认是靠左靠上出示的。默认情状下,修改左外边距和上外地距时,会潜移默化当下元素的地方。

² 外边距负值

* 外边距(margin)

border-bottom(下边框)  border-left(左边框)  border-right(右边框) 
border-top(上边框)

        }

【设置边框,必须同时设置边框宽度、颜色和体裁(与各样无关) 】

:before向指定元素添加第一个子元素(不是当真的子元素),通过为充分的率先个子元素设置指定的样式

² 外边距重叠

且重叠现象只会现出在笔直方向,而品位方向则不足。

(1)父元素用padding,此法会在原有大小添加内边距,改变大小

L    普通英文单词 {color : 属性值red;}

此措施大概,便捷。但设置的水彩在不同浏览器中,可能来得的颜料出现反差

none无边框;    solid实线;    double 双实线;    dashed 虚线;   
dotted点状框

² 外边距传递

(1)分五个情景:

  格式:#新民主主义革命粉红色粉色,范围是00 ~ FF   eg: #ff0000或#f00

子元素设置(上外地距),此操作会传递给父元素。
解决:设置为父元素的(上内边距)

展现的实际上增幅 = width + border-left-width + border-right-width

其次种:合并写(简写属性);    

² 边框颜色   border-color

效用:实现HTML的页面布局     (所有HTML元素可以看作盒子)

* text-decoration: none;  即去掉链接元素自带的下划线

* 设置边框的小幅和颜料,未安装边框的体裁 – 没有其它效能

概念:元素边框与元素内容之间的距离    [简写属性]

格式:rgb(数字,数字,数字),数字范围是0 ~ 255  r红色g绿色b蓝色

7、伪类

  • Ø 盒子模型分类

L   颜色的八进制情势

 图片 4

   * 三原色 – 红、绿、蓝

   左右居中:子元素margin-left = (父元素-子元素)width 的一半

图片 5

设置两个值:下边框 右侧框 下面框 右边框 (顺时针方向);

            padding: 5px 10px;     background-color: lightgray;

 <a>实现按钮的功效          格式:<a
href=”#”>按钮</a> 

(2)分五个方向

border-top-width; border-right-width; border-bottom-width;
border-left-width;

:hover – 设置鼠标悬停链接元素的体制       :active
设置鼠标选中链接元素的样式

  伪元素

(2)子元素用margin,此法仅是反正居中

   上下居中:子元素height + 父元素padding-top =父元素height

            text-decoration: none;   order: 1px solid lightslategrey;

eg:  border:宽度 颜色 样式 ;

* 影响自己因素的岗位:margin-top   margin-left

 图片 6

² 边框样式

特性设置时:边框有效;内边距有效;外边距左右实惠,【上下无效】;

要素设置左外边距设为负值,则向相反方向移动     结果:当前元素移出页面

下一个元素这周上外地距为负值,     结果:下一个因素会覆盖上一个要素

* border-box —怪异盒子模型    实际的宽窄 = width

  Eg:  a {

上一个要素设置下外边距,下一个元素设置上外地距。(相邻兄弟关系)

eg:  border-width: 数字px;border-color: 颜色; border-style:样式;

* 只设置边框的升幅,未设置边框的颜料和体裁 – 没有此外功用

安装一个值:同时安装多少个边框的宽窄;     

*子元素在父元素居中

* 内边距(padding)

格式:第一种:分别独立写;

它包括: 内容区(content)  内边距(padding)  边框(border)   外边距(margin)

概念:边框到页面的边缘距离(不会潜移默化因素的可见大小,但潜移默化因素地点)[简写属性]

8、盒子模型

²   边框宽度(px)

职能:为<a>元素添加样式

box-sizing属性:

6、设置颜色单位

:link – 设置链接元素未访问的样式          :visited
设置链接元素访问后的体制

* content-box —默认盒子模型   实际的宽度 = width + border + padding

安装五个值:下边框 左左边框 下面框;

            盒子模型的边框对页面布局的影响

安装六个值:上下边框 左左侧框;

结果:垂直方向的邻座的异地距会发生重叠现象,则外边距会取两者中的【最大值】;

* 影响相邻元素的职位:margin-right  margin-bottom

注:原本设置的宽高,倘若默认盒子模型,在原来宽度、中度的根底扩张边框和内边距,使得宽度增大;而奇怪盒子模型,它是向里增添,使得原有设置的小幅