L   颜色之八进制方式。L   颜色之八进制方式。

6、设置颜色单位

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;}
此方法简单,便捷。但设置的颜色以不同浏…

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、盒子模型

图片 4

意:实现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:宽度 颜色 样式 ;

            盒子模型的边框对页面布局之熏陶

 图片 5

来得的实在增幅 = 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)

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

 图片 6

要素以
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

流动:原本装的丰足高,若是默认盒子模型,在原宽度、高度的底子增加边框以及内边距,使得宽度增大;而奇怪盒子模型,它是朝着里扩展,使得原有设置的升幅

相关文章