阅读 237

css入门笔记(上)

1 css引入与规范

1.1 导入式

导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。

<style type="text/css" media="screen">   
	@import url("CSS文件");   
</style>
复制代码

### 1.2 外链式 引入一个外部的css样式表
语言:link标签 href="css样式路径名称" 可以放在head标签或者body标签里面
<link rel="stylesheet" type="text/css" href="index.css">
复制代码

1.3 外链式和导入式的区别

  • link和@import虽然都是引入外部的css文件,但是他们是有天差地别的区别的
  • link是html标签,@import完全是css提供的方式,要写在css文件或者style标签中。
  • 他们的加载顺序也是有区别的,当一个页面被加载的时间,link引用的css文件会被同时加载,而@import引入的css文件会等页面全部下载完后再加载。
  • 当使用JavaScript控制DOM去改变css样式的时间,只能使用link标签,因为import是不能被DOM控制的

1.4 行内式

通过style这个标签属性,将css键值对直接写入标签内

<p style="width:100px;height:100px;background-color:red;"</p>
复制代码

1.5 内嵌式

可以放在head或者body里 建议放在head标签里面title标签的下面

2 选择器的世界

2.1 基本选择器

2.1.1 标签选择器

直接使用元素标签进行选择

  p{color:red;}  权重1

2.1.2 类选择器

通过元素的类名,来选择元素,一个元素可以有多个类名,都代表这个元素类名是元素class属性中的属性值,例如

  .sum{} => 此选择器的权重为10

2.1.3 id选择器

通过元素的id名,来选择元素,类名是元素id属性中的属性值,例如

#sum{} => 此选择器的权重为100

2.1.4 通配符选择器

通过*选择全部元素,包括根元素 *{} => 权重小于1,可以被覆盖

2.2 并集选择器

你可以对选择器进行分组,这样,被分组的选择器就可以分享想相同的声明。用逗号被需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{
	color:green;
}
复制代码

2.3 交集选择器

两种属性同属一个元素的时候,我们可以使用交集选择器来进行元素的准确选择

<p class='name1 name2' id='id1'></p>
p.name1{}
p#id1{}
.name1.name2{}
复制代码

2.4 派生(后代)选择器

  • 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁,用空格隔开列表中的strong元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器
  • 后台选择器尽量不要超过3个,没有必要把每一个层级都写出来,只需要写出关键节点极客
li strong{
	font-style:italic;
  font-weight:normal;
}

<ol>
	<li>
  	<strong>我是斜体字。这个因为strong元素位于li元素内。</stong>
  </li>
</ol>
复制代码

2.5 子代选择器

与后代选择器相比,子元素选择器只有选择作为某元素子元素,符号为大括号

h1 > strong {color:red;}

<h1>This is<strong>very</strong> important.</h1>
复制代码

2.6 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素

h1+p{
	margin-top:50px;
}
复制代码

2.7 属性选择器

对带有指定属性的html元素设置样式 权重10

可以为拥有指定html元素设置样式,而不仅限于class和id属性

下面的例子为title属性的所有元素设置样式

[title]{color:red;}
复制代码

属性和值选择器
下面的例子为title='wjw'的所有元素设置样式

[title=wjw]{color:red;}
复制代码

设置表单的样式

input[type='text']{width:150px;display:block;background:yellow}
复制代码

2.8 伪装选择器

  • a:link{color:#ff000}  // 未访问的链接
  • a:visited{color::#ff000} // 已访问的链接
  • a:hover{color:#ff000} // 鼠标移动到链接上
  • a:active{color:#ff000} //选定的链接

10<权重<11

选择器
示例 示例描述 CSS版本
.class  .demo 选择 class="demo" 的所有元素 1
#id #firstname 选择 id="firstname" 的所有元素 1
* * 选择所有元素 2
element  p 选择所有

元素

1
element,element div,p 选择所有
元素和所有

元素

1
element element div p 选择
元素内部的所有

元素

1
element>element div>p 选择父元素为
元素的所有

元素

2
element+element div+p 选择紧接在
元素之后的所有

元素

2
[attribute] [target] 选择带有 target 属性所有元素 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素 2
[[attribute =value]](www.html.cn/book/css/se…) [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素
:link a:link 选择所有未被访问的链接 1
:visited a:visited 选择所有已被访问的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标指针位于其上的链接 1
:focus input:focus 选择获得焦点的 input 元素 2
:first-letter p:first-letter 选择每个

元素的首字母

1
:first-line p:first-line 选择每个

元素的首行

1
:first-child p:first-child 选择属于父元素的第一个子元素的每个

元素

2
:before p:before 在每个

元素的内容之前插入内容

2
:after p:after 在每个

元素的内容之后插入内容

2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个

元素

2
element1~element2 p~ul 选择前面有

元素的每个

    元素
3
[attribute^=value]  a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 元素 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 元素 3
:first-of-type p:first-of-type 选择属于其父元素的首个

元素的每个

元素

3
:last-of-type p:last-of-type 选择属于其父元素的最后

元素的每个

元素

3
:only-of-type p:only-of-type 选择属于其父元素唯一的

元素的每个

元素

3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个

元素

3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素

3
:nth-last-child(n)  p:nth-last-child(2) 同上,从最后一个子元素开始计数 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个

元素的每个

元素

3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数 3
:last-child  p:last-child 选择属于其父元素最后一个子元素每个

元素

3
:root :root 选择文档的根元素 3
:empty  p:empty 选择没有子元素的每个

元素(包括文本节点)

3
:target #news:target 选择当前活动的 #news 元素 3
:enabled  input:enabled 选择每个启用的 元素 3
:disabled input:disabled 选择每个禁用的 元素 3
:checked input:checked 选择每个被选中的 元素 3
:not(selector) :not(p) 选择非

元素的每个元素

3
::selection  ::selection 选择被用户选取的元素部分 3
:out-of-range  :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write  :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"(只读) 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid  :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3

3 CSS的三大特性(重叠性+优先级)

3.1 层叠性

浏览器解析CSS是从上至下,当CSS冲突时以最后定义的CSS为准。
层叠性是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义

标记字号大小为12像素,链入式定义

标记颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加

3.2 优先级

优先级顺序为:!important>style>权重值

权重记忆口诀:从0开始,一行内样式+1000,一个id+100,一个属性选择器/class或者一个元素名+10,或者伪元素+1

规则:相同的权重:以后面出现的选择器为最后规则
  不同的权重,权重值生效

3.1.1 基本选择器

类型 权重
标签选择器/div 1
class/类选择器 .right 10
id 100
内联 1000
* 0-1
  • 后代
  • 子代
  • 交集
  • 并集
  • 相邻兄弟
  • 兄弟
  • 属性
  • 伪类
  • 伪元素

权重:每个单独的选择器的权重相加之和

.header ul li{
	/* 权重 12 : 10+1+1 */
  backgournd:red;
}

.header .right li{
	/* 权重 21:10+10+1 */
  backgournd:#000;
}
复制代码
  • 权重相等的情况下比较

id>class>标签>*

  1. 权重不相等的情况下: 谁的权重大,听谁的
  2. 权重相等的情况下:遵循就近原则,下面的覆盖上面的
  3. 权重相等,不遵循就近原则,就想听上面的怎么办
  4. !important 1000

3.2.1 权重算法

第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
优先级从高到低:行内选择符、ID选择符、类别选择符、元素选择符。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

4 CSS的三大特性 (继承属性)

4.2 无继承性的属性

4.2.1 display

  • inline
  • block
  • inline-block
  • table-cell
  • none

规定元素应该生成的框的类型

4.2.2 文本属性:

vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向

4.3.3 盒子模型的属性:

width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4.3.4 背景属性

background、background-color、background-image、background-repeat、background-position、background-attachment

4.3.5 定位属性

float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

4.3.6 生成内容属性

content、counter-reset、counter-increment

4.3.7 轮廓样式属性

outline-style、outline-width、outline-color、outline

4.3.8 页面样式属性

size、page-break-before、page-break-after

4.3.9 声音样式属性

pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

4.3 有继承性的属性

4.3.1 字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

4.3.2 文本系列属性

text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色

4.3.3 元素可见性

visibility

4.3.4 表格布局属性

caption-side、border-collapse、border-spacing、empty-cells、table-layout

4.3.5 列表布局属性

list-style-type、list-style-image、list-style-position、list-style

4.3.6 生成内容属性

quotes

4.3.7 光标属性

cursor

4.3.8 页面样式属性:

page、page-break-inside、windows、orphans

4.3.9 声音样式属性:

speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

4.4 所有元素可以继承的属性

1、元素可见性:visibility
2、光标属性:cursor

4.5 内联元素可以继承的属性

1、字体系列属性
2、除text-indent、text-align之外的文本系列属性

4.6 块级元素可以继承的属性

1、text-indent、text-align

5 css盒子模型

5.1 css盒子模型图解

image.png

image.png

  • margin:外边距
  • border:边框
  • padding:内边距

5.2 css盒子模型之宽度和高度

  1. px 像素写死
    2. % 动态计算的单位(自适应 响应式)
*{
	margin:0;
  padding:0;
}
.banner img{
	width:100%;
}
复制代码

5.3 内边距padding及简写

image.png

5.4 边框线border的使用技巧

border:边框的宽度 边框线类型 边框线的颜色

5.4.1 边框线类型

5.4.2 边框线类型

  • solid 实线
  • dashed 虚线
  • dotted 点状线

5.4.3 边框线的颜色

黑色 白色
颜色的英文 black white
# #000 #fff
rgb rgb(0,0,0) rgb(255,255,255)

border:10px solid #000
如果没有知名方向的情况下,表示四个方向都相等
border-top  上边
border-right  右边
border-bottom 下边
border-left 左边

5.4.4 去掉边框

border:0
如果border属性只有边框段杜,没有边框的类型和颜色 导致border属性失效

5.4.5 面试题(画个三角形)

image.png

 /* 
    三角箭头原理:正方形的任意相邻的两条边线
    然后旋转一定的角度得到我们需要的任意方向的箭头 
    deg 角度单位 rotate旋转角度
    三角形的大小由正方形的宽高去控制
    三角形的粗细是有边框线去控制
    三角形的颜色是有边框线的颜色去控制
 */

<div class="arrow"></div>

<style>
.arrow{
  width: 0px;
  height: 0px;
  margin-top: 50px;
  margin-left: 50px;
  border-width:0 30px 30px;
  border-style:solid;
  border-color:transparent transparent #333;
  transform: rotate(90deg);//控制角度
}
</style>
复制代码

5.5 padding

方向上和padding一致

5.6 margin的负值使用技巧

结构上不动,可以调换div顺序

5.7 padding和margin的区别

padding 是内边距
会影响我们在浏览器中看到的元素的实际大小内边距会让元素的内容增大和其它的元素没有关系
margin 是外边距
不会影响我们在浏览器中看到的元素的实际大小外边距不会让元素的内容增大和另一个元素的间距

image.png

5.8 盒子模型的计算公式及使用技巧

元素实际宽度

宽度width + padding-left/padding-right+border-left/border-right

元素实际高度

高度height+padding-top/padding-bottom+border-top/border-bottom

口号: 元素的实际大小智慧padding和border的影响跟margin没有半毛钱的关系
如果加了padding和border的值要在width和height的值上减去padding和border的值 否则内容会溢出

6 BFC机制

BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

6.1 BFC布局规则

  1. 内部的Box会在垂直方向,一个接一个地放置;
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。;
  4. BFC的区域不会与float box重叠,常用来清除浮动和布局。;
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。;
  6. 计算BFC的高度时,浮动元素也参与计算;

6.2 会生成BFC的元素

  • 根元素或其它包含它的元素;
  • 浮动 (元素的float不为none);
  • 绝对定位元素 (元素的positionabsolutefixed);
  • 行内块inline-blocks(元素的 display: inline-block);
  • 表格单元格(元素的display: table-cell,HTML表格单元格默认属性);
  • overflow的值不为visible的元素;
  • 弹性盒 flex boxes (元素的display: flexinline-flex);

6.3 BFC的范围

BFC的范围在MDN中是这样描述的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一个BFC包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。
插入一段代码方便理解

<div class='div_1 BFC'>
     <div class='div_2'>
         <div class='div_3'></div>
         <div class='div_4'></div>
      </div>
      <div class='div_5 BFC'>
	       <div class='div_6'></div>
         <div class='div_7'></div>
     </div>
</div>
复制代码

div_1创建了一个块格式上下文,这个上下文包括了div_2div_3div_4div_5。即div_2中的子元素也属于div_1所创建的BFC。但由于div_5创建了新的BFC,所以div_6div_7就被排除在外层的BFC之外。
这就代表着一个元素不能同时存在于多个BFC中。
BFC的一个最重要的效果是,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。

6.4 BFC的常用方式:

6.4.1 子级浮动导致父级高度塌陷

<style type="text/css">
        .box{
            width: 900px;
            background: black;
          	height: 300px; // 增加高度
        }

        .box1{
            height: 300px;
            width: 300px;
            background: red;
            float: left;
        }

        .box2{
            height: 300px;
            width: 300px;
            background: blue;
            float: left;
        }

    </style>

......

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
复制代码

上面的代码定义了3个块,一个父级包含了两个子集,但是父级的背景颜色无法显示,是因为子集元素浮动导致了父级高度的塌陷。

image.png


在为box设置BFC后,box的高度才能找回来。
image.png

从而显示出正确的样式。

6.4.2 子级margin-top将父级带下 为父级触发BFC

一个盒子有上边距 另一个有下边距 会出现margin边距的重叠问题
并列盒子的margin重写=>双margin的重叠
-> 取大值 并不是他们相加之和 也就是谁大听谁的

要将黑色块中的小红块下移一点,直接使用了margin-top,结果黑块一起下移了。

<style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background: black;
        }

        .box1{
            height: 100px;
            width: 100px;
            background: red;
            margin-top: 50px;
        }

    </style>

......

<div class="box">
    <div class="box1"></div>
</div>
复制代码

而设置了BFC后,就能正确的下浮红色块

margin的兼容问题:margin top的传递问题

大盒子里面嵌套小盒子 给小盒子加margin-top 不但没有实现和大盒子之间的间距 反而传递给大盒子身上 导致整体下移动
解决兼容性问题

  1. overflow:hidden  解决margin-top的传递问题(此处并没有溢出隐藏)
  2. padding-方位:1px 这种方法影响最后实际宽高 需要在width/height上基础上减掉才不会影响最后实际的宽高
  3. border-top:1px 这种方法会影响最后实际的高度 需要在高度height上基础上减掉 才不会影响最后实际的高度
  4. 给子元素的margin-top的值改成父元素的padding-top,这样就避免使用margin-top值导致传递的问题

7 背景相关

7.1 背景属性

背景缩写缩写可以卸载一个声明中设置所有的背景属性
背景图像支持引入多个图像
主要属性有:
background-color
background-image
background-repeat
background-position
backgournd-attchment
backgournd-size
backgournd-origin
backgournd-clip


7.2 背景颜色

background-color

  • 指定要使用的背景颜色 例如:background-color:#ffcc00
  • 可以简写为background
  • backround-color 不能继承,其默认值是trandsparent。trandsparent有透明之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
  • transparent 指定背景颜色应该是透明的,默认值。
  • inherit 指定背景颜色,应该从父元素继承
<style>
.box{
	width:650px;
  height:32px;
  background-color:orange;// 颜色
  color:#fff; // 字体颜色
  text-aligh:center;//字体内容水平居中
}

div{
	width:200px;
  height:200px;
  backgournd-color:darkbule;
  margin:0 auto;//上下0 左右auto 块元素水平居中
  line-height:200px;//垂直居中
}
</style>
复制代码

7.3 背景图片

background-image

  • url('图像的url路径地址')图像的url
  • none 表示北京上没有防止任何图像,这就是默认值
  • inherit指定背景图像应该从父元素继承
  • 一个元素可以引入多张背景图片,指定要使用的一个或者多个背景图像,默认情况下background-image放置在元素的左上角,并重复垂直的水平方向。
  • backgournd image:url('pic.png'),url('pic2.png')... ...
  • backgournd image 属性不能继承

7.4 背景重复

  • 指定如何重复背景图像,默认情况下,重复background-image的垂直和水平方向
  • repeat 背景图像向垂直和水平方向垂直。这是默认
  • repeat-x 只有水平位置会重复背景图像
  • repeat-y 只有垂直位置会重复背景图像
  • no-repeat background-image不会重复
  • inherit 指定背景重复应该从父元素继承
.logo{
	width:300px;
  height:300px;
  backgournd-image:url('../xxx/png');
  backgournd-repeat:repeat x;//平铺的方式(重复)
}
复制代码

7.5 背景定位

  • backgournd-position属性设置背景图像的起始位置;
  • xpos ypos 第一个值的水平位置,第二个值是垂直。左上角是0。单位可以是长度值px,关键字和百分数值
  • 关键字成对出现left right top bottom center,如果仅指定一个关键字,其他值将会“center”
  • x% y%第一个值水平位置,第二值是垂直。左上角是0%0%。
  • inherit 指定background-position属性设置应该从父元素继承
.logo{
	width:400px;
	height:400px;
	backgournd-color:#3385ff;//背景颜色
  backgournd-image:url('./xxx.png');
	backgournd-repeat:no-repeat;
  backgournd-position:50px 50px;//x轴的坐标(水平方向)y轴的坐标方向(垂直方向) x轴越大 越往右 x轴越大 越往下
	//50% 50% > center center //中心位置

}
复制代码

经常使用在雪碧图中

7.6 背景关联

backgournd-attachmen

  • 设置背景图像是否固定或者随着页面的其余部分滚动
  • scroll 背景图片随页面的其余部分滚动。这是默认
  • fixed  背景图像是固定的
  • inherit 指定background-attachment的设置应该从父元素继承
*{
	padding:0px;
  margin:0px;
}

.banner{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat

}

.banner01{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat

}

.banner02{
	width:100%;
  height:800px;
  backgournd:url(../xxx.png) no-repeat
   backgournd-attachmen:fixed;// 可以固定不动
}

复制代码

7.7 设置对象的背景图像的尺寸大小

background-size

  • 用长度值指定背景图像大小。不允许负值;
  • 用百分比指定背景图像大小。不允许负值。
  • auto背景图像的真实大小
  • cover将背景图等比例缩放到完全覆盖容器,背景图像有可能超出容器;
  • contain将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内
.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png')
  background-size:300px 300px; // x轴  y轴
}
复制代码

7.8 设置对象的背景图像向外裁剪的区域

background-clip

  • padding-box:从padding区域(不含padding)开始想外裁剪背景;
  • border-box:从border区域(不含border)开始向外裁剪背景
  • bontent-box:从content区域开始向外裁剪背景
  • text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此极客实现使用背景作为填充色之类的遮罩效果。
.pic{
	width:200px;
  height:1600px;
  background:url('../xx.png')
  background-size:300px 300px; // x轴  y轴
  backgound-clip:border-box;
}
复制代码

7.9 设置背景图像的参考原点(位置)

background-orign

  • padding-box:从padding区域(含padding)开始显示背景图像
  • border-box:从border区域(含border)开始显示背景图像
  • content-box:从content区域开始显示背景图像

image.png

8 voerflow:hidden

8.1 overflow溢出隐藏

超过内容之外的部分给隐藏起来

p{
	width:300px;
  height:10px;
  overfolw:hidden;
}

...
<p>xxxxxxxxxxxxxxxxxxxxxxxx......xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.....</p>
复制代码
  1. 用来清楚浮动产生的影响
  2. 解决margin-top的传递问题

9 让多个元素的一行显示的方法

9.1 让多个元素的一行显示的方法

  • display:inline; // 转换为行内元素  但是设置宽高属性之后不起作用
  • display:inline-block;  // block可以让元素在一行显示,但是他会受空格/换行建,会产生默认间距
    • 去掉空格和换行建的影响 让标签都在一行 (不推荐 阅读性不好)
    • 给父元素增加一个 font-size:0,然后给子元素增加一个 font-size:14px;(但是我们还会发现一个问题:元素里面如果有文字 文字消失,然后在子元素增加一个属性即可)
  • float:left/rigjt; // 但是我们清浮动

** [display:inline-block元素的特点]**

  • 让盒子横向排列
  • vertiacal-align 属性会影响到inline-block元素,你可能会把他的值设置为top
  • 你需要设置每一列的宽度
  • 如果html源代码中元素之间有空格,那么列与列之间会产生空隙
*{
	margin:0px;
  padding:0px;
}

.content1{
	display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

.content2{
	display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

...

<div class="content1">内容1</div>
<div class="content2">内容2</div>
复制代码

inline-block 在ie7 不兼容

直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下

/*推荐:IE6、7*/ 
div {
  display:inline-block;
  *zoom:1;
  *display: inline;
}

/*推荐*/
div {
   display:inline-block;
   _zoom:1;
   _display:inline;
} 
复制代码

解释: display:inline-block照顾的是ie8+的浏览器,这是正常的设置,在低版本的ie设置下行内块有2个条件,一个行内,一个设置宽高,触发layout即可设置宽度,而div设置了宽度后还是会黄航,layout不是为了水平而设置,所以为了块级元素转行内块上加上"display:inline"属性,但是display:inline不会触发layout,于是加上zoom:1重新触发layout,于是形成了一个跨域设置宽高的行内元素

10 文本省略号

10.1 单行文本出现省略号必备的条件(面试题)

*{
	margin:0;
  padding:0;
}

h2:{
	width:600px;
  height:30px;
  /*单行文本出现省略好必备的条件*/
  overflow:hidden;/*溢出隐藏*/
  white-space:nowrap;/*强制文字不折行*/
  text-overflow:ellipsis;/*文字隐藏的方式:以省略号的方式隐藏*/
}

复制代码

10.2 多行文本出现省略号必备的条件(面试题)

h2{
	width:600px;/*宽度*/
  display:-webkit-box;/*弹性盒子模型*/
  -webkit-line-orient:vertical;/*规定元素的排行方式:垂直排序*/
  -webkit-line-clamp:2;/*文字的行数 需要显示几行 值就写几行*/
  overflow:hidden;/*溢出隐藏*/
}
复制代码

11 浮动元素的特点

11.1 float元素的特点

  1. 浮动元素在一行显示
  2. 设置属性值为left时,浮动元素会依次从父级盒子的左侧向右排布,设置属性值为right时,浮动元素会依次从父级盒子的右侧想左排布
  3. 浮动元素自动其有块级元素的属性
  4. 浮动元素脱离文档流
  5. 浮动元素内的子元素,不会继承浮动属性
  6. 浮动元素下面的元素不能识别浮动元素的高度和位置,所以不许display:block了

12 文档流和脱离文档流

12.1 介绍

  • 文档流:指的是元素排版布局过程中,元素会自动从左到右,从上往下的流式排版。最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素
  • 每个非浮动块级元素都独占一行,浮动元素则按规定浮在行的一端。若当前行容不下则另起新行再浮动
  • 内联元素也不会独占一行;几乎所有元素(包括块级,内联和列表元素)均可生成子行,用于摆放子元素
  • 标准文档流等级:分为两个等级,块级元素和行内元素;
  • 脱离文档流:文档流内的正常元素识别不到这个元素(脱离文档的元素相当于平行漂浮在文档流之上)

正常的文档流:从左往右 从上往下
文档流可以分等级:行内元素和会计元素
行内元素  从左往右
块级元素  从上往下

12.2 面试题:行内元素和块级元素的特点,请列举出标签?

需求:需要块级元素(比如:div)在一行显示
脱离文档流:元素的正常排列方式被打破

脱离文档流的影响:

  1. float
  2. 定位

12.3 浮动参数的影响或负作用

  1. 设置背景颜色属性不起作用
  2. 给父元素设置边框border属性没有被撑开
  3. 给父元素设置内边距padding属性也没有被撑开

12.4 如何清浮动

  1. 给浮动元素的父元素手动添加一个固定的高度(不推荐)
  2. 给浮动元素的父元素设置overflow:hidden/auto
  3. 给浮动元素的父元素结束标签之前加一个具有元素特点的标签(我们一般用div),给元素clear:both
  4. clearFix伪元素去清楚浮动 (这种方法是项目中最常用的方法)

利用伪元素:after清浮动的固定代码;只要清浮动我们在浮动元素的父元素上加一个.clearfix即可

12.5 让元素消失在我们的视野中

  1. 透明度opacity:0; [0~1]
  2. display:node 隐藏
  3. height:0和overflow:hidden
  4. line-height:0和overflow:hidden(没有设置高度的情况下)
  5. visbility:hidden;让所有可见性的元素隐藏
  6. margin/padding设置足够大  只要能让他消失
  7. 利用transform 属性 让transform坐标足够大
关注下面的标签,发现更多相似文章
评论