css学习记录(二)
本文最后更新于110 天前,其中的信息可能已经过时,如有错误请发送邮件到619701626@qq.com

CSS选择器的权重

优先级:
行内样式 >ID选择器 > 类选择器 > 元素选择器 > 通用选择器

各选择器的权重

权重的计算为相加比大小

CSS边框

边框样式

border-style属性指定了要显示什么样的边框

值:

dotted:定义一个点状的边框
dashed:定义一个虚线边框
solid:定义一个实线边框
double:定义一个双倍的边框
none:定义无边框
hidden:定义一个隐藏的边框

border-style: hidden>border-style: solid>border-style: none

table {
    border-collapse: collapse;    让表格线细一些
}

控制单独一条的边框线,可以在border-style中间添加一个表示方位的词
如:

border-right-style:

border-style有简写方法,有四种写法:

第一种写法:四个值,分别代表上边、右边、下边、左边的边框样式,从顶部开始按照顺时针方向来设置值

第二种写法:三个值,分别代表上边、左右边、下边的边框样式

第三种写法:两个值,分别表示上下边、左右边的边框样式

第四种写法:一个值,表示四个边框的样式

边框宽度

border-width属性用于设置四个边框的宽度
以 px、em等为单位
或者:
thin、medium、thick————薄、中、厚

边框宽度一样有简写方法,与上面一样

边框颜色

border-color属性用于设置四个边框的颜色

值为:颜色名称、十六进制颜色值、RGB颜色值
也可以通过transparent来设置透明

边框颜色一样有简写方法,与上面一样

和字体 font 属性一样,边框也可以使用速记属性。

如:boder: 5px solid red
border-style必须要有

单独边简写一样
如: border-top

CSS列表

应用list-style-type属性可以设置不同的列表项标记

值有:

circle 空心圆点
disc 实心圆点
square 小方点
decimal 数字
upper-roman 大写罗马字母
lower-alpha 小写字母

none 去掉列表标记

列表属性也可以简写:
list-style被用来在一个声明中设置所有的列表属性
例如:

list-style: square inside url(./purple.gif);
按照list-style-type---list-style-position---list-style-image 顺序书写
如果有值缺省,就按照默认值

list-style-image属性指定了一个图像作为列表项的标记
属性值为: url()

list-style-image: url(背景图片路径);

list-style-position属性来实现标记的位置
值为:
outside表示标记在列表项之外
inside表示标记在列表项内部

还可以改变颜色来修饰列表

paddingmargin属性,给元素添加内外边距

* {
    padding: 0;
    margin: 0;
    用来消除元素默认的内外边距
}

CSS背景属性

给背景添加图片
可以通过background-image属性实现
值为: url()

添加图片之后,会以平铺的方式展示
如果不想这样,需要使用一个新的背景属性background-repeat
取值为:no-repeat

如果要调整图片位置,需要用background-position
有两个值:

第一个值表示在水平方向上的对齐方式leftcenterrigt
第二个值表示在垂直方向上的对齐方式topcenterbottom

放上文字之后,背景图片会随着滚动,如果想到文字滚动,背景不动
需要使用background-attachment属性
用来声明容器里的背景图片与内容的依附方式

fixed :图片固定
scroll:同时滚动

修改背景颜色一般用background-color
有时候颜色深,可以让背景变透明一些实现颜色变浅

    background-color:rgba()
    值为0-1之间的数字,0为完全透明,1为完全不透明
    比如background-color:rgba(0,0,0,0.5)  表示黑色半透明

可以使用background来指定所有的背景属性,可以把body的全部背景属性
合并在background属性里
如:

    background:rgba(0,255,0,0.1) url(./xxxx.png) no-repeat right bottom fixed;

CSS精灵图

通过background-position调节位置
值为:110px 45px 这种

背景滚动视觉差

使用
background-attachment: fixed; 样式
实现了背景的固定

background-size: cover;会使背景铺满整个容器

所以可以这样实现

.box1 {
    background-color: red;
    background-repeat: no-repeat;
    background-image: url(./01.png);
    background-size: cover;
    background-attachment: fixed;
    最后一步是让图片固定,让下面的额图片上来
    如果没有这一步,无法实现视觉差效果
}

这样代码太乱,可以直接简写

.box1 {
    background: fixed no-repeat url(./03.png) 0px 0px/cover;
}

其中,background-size: cover;在简写中
在它的前面必须添加背景图片位置,即使位置不调整,也需要添加 0px 0px这一对值
0px 0px/cover 斜杠前是background-position的属性

CSS轮廓

CSS轮廓属性有:

outline-style:轮廓样式
outline-color:轮廓颜色
outline-width:轮廓宽度
outline-offset:轮廓偏移
outline:轮廓简写

首先是outline-style
值有:

dotted – 定义一个点状轮廓
dashed – 定义一个虚线轮廓
solid – 定义一个实线轮廓
double – 定义一个双线轮廓
none – 表示无轮廓
hidden – 定义一个隐藏的轮廓

outline-width轮廓线宽度属性
值有:

thin:一般为 1 px
medium:一般为 3 px
thick :一般为 5 px
一个特定的尺寸 : 以 px、em 为单位

轮廓是在元素的边框之外绘制的,并且可能与其他内容重叠
它不是元素尺寸的一部分,元素的总宽度和高度不受轮廓宽度的影响

outline-color轮廓线颜色属性
值为:颜色名称,十六进制,rgb

outline简写:

    outline: thin double red;
    其中outline-style必须设置

ouline-offset
用来设置轮廓和元素之间的空隙

CSS边距和margin塌陷

用来在元素周围创造空间,也就是控制元素边框外的距离
也就是margin属性,控制外边距属性
值有:

auto:浏览器自动计算的边距
length :以 px、pt(绝对单位,磅,1磅=0.376毫米)、cm 等为单位指定边距
% : 以父元素宽度的百分比来指定边距

length% 可以取负值,表示减少外边距的空间大小

为了简化代码,可以在一个margin属性中指定所有的边距属性

    margin: 10px 20px 30px 40px;
    表示从margin-top开始按顺时针方向的四个值

    margin: 10px 20px 30px;
    表示上面边距为10px,左右边距为20px,下边距为30px 的三个值

    margin: 10px 20px;
    表示上下边距为10px,左右边距为20px 的两个值

    margin: 10px;
    表示上下左右边距均为10px

border 很相似

margin: auto; 使元素在其父元素内或其容器内水平居中
该元素会占用指定的宽度,剩余的空间将在左右边距之间平分

在两个容器的邻接处,有时会出现边距塌陷的问题,也称之为 margin 塌陷
一般发生在相邻块元素垂直边距,和嵌套块元素垂直边距邻接的时候

margin塌陷

比如这个元素的顶部边距和这个元素的底部边距,会被折叠成一个单一的边距
这个边距等于两个边距中最大的那个

这种情况不会发生在左右边距上,只会发生在顶部和底部的边距上

除了相邻块元素外,嵌套块元素垂直边距也会塌陷
两个嵌套关系的块元素,有时父元素的上边距会与子元素的上边距,也会发生合并,合并后的边距也为两者中的较大的值

CSS填充和宽高

CSS填充属性用于在一个元素的内容周围产生空间
也就是边框内到内容外,之间的距离
也就是padding 属性,设置内填充

所有的padding
值为:

length : 以 px、pt、cm 等为单位指定填充
%: 以父元素宽度的百分比来指定填充

length% 可以取负值,表示减少外边距的空间大小

简写同CSS边距(margin)一样

如果一个元素有指定的宽度,那么加在该元素上的填充
就会加到该元素的总宽度上

高度和宽度属性不包括marginborderpadding区域
只是用来定义元素的内容尺寸
值有:

auto:浏览器会计算出高度和宽度
length : 以 px、pt、cm 等为单位定义高度和宽度
% : 以父元素宽度的百分比来定义高度和宽度
initial : 将高度和宽度设置为默认值,实际上就是 auto 了。

width 和height 属性是不包含内填充、边框和外边距的

CSS盒模型

标准盒模型

CSS 盒模型本质上是一个包裹每个 HTML 元素的盒子
包含marginborderpaddingcontent四个部分
浏览器就是通过盒模型来计算元素在网页中占据的空间大小的

content 表示盒子的内容,包含文本、图像等
Padding 表示填充内容周围的一个区域,它是透明的
Border 表示围绕填充和内容的边框
Margin 表示边框以外的区域,它是透明的

计算盒子的宽度和高度,有两个公式;

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边 + 右边 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填 + 上边 + 下边 + 上边距 + 下边距

当应用 CSS 设置一个元素的widthheight属性时,只是设置了元素内容区域的宽度和高度,要计算一个元素的完整尺寸,必须要加上填充、边框和边距

标准盒模型

怪异盒模型

给元素声明box-sizing属性
取值为border-box
这个元素就按照怪异盒模型来呈现大小了

所以怪异盒模型的公式为:

盒子的宽度 = CSS样式设置的 width 值 + 左边距 + 右边距
盒子的高度 = CSS样式设置的 height 值 + 左边距 + 右边距

怪异盒模型

box-sizing属性还有一个值content-box
就是用来触发元素的标准盒模型,这也是元素盒模型的默认值

如果没有给元素设置box-sizing属性,容器的大小就会按照标准盒模型来计算

CSS布局之显示属性

display是控制布局最重要的 CSS 属性
它指定了一个元素是否显示以及如何显示
每个 HTML 元素都有一个默认的显示值元素类型不同,默认的显示值也不同

大多数元素的默认显示值是

block:元素显示为块级元素
inline:元素显示为行内元素
none: 元素显示隐藏元素

span元素和a元素宽度为链接文本的长度

none会使盒子隐藏,并且占据的控件也消失
样式visibility: hidden也会隐藏一个元素,但是该元素仍将占用它隐藏前相同的空间
也可以通过visibility: visible样式来重新显示盒子
这在应用JavaScript 动态控制元素显示和隐藏时非常有用

CSS布局之元素类型

行内元素

行内元素不能设置宽高样式
行内元素可以设置边框线样式
行内元素可以设置内填充样式
行内元素可以设置左右方向的外边距样式

块元素

给块元素设置宽高、边框线、内填充、外边距样式,都是有效的

块元素虽然可以设置盒模型的全部样式
但是每个块元素会独占一行
如果想让块元素在一列显示
display: inline-block;样式可以满足我们的愿望
它具备inlineblock两种显示类型的特点
既可以给元素设置宽高,又可以让它们在一行上显示

这里需要声明:
设置一个元素的display属性只能改变该元素的显示方式
而不能真正的改变html元素的类型
比如,一个具有display: inline;的块元素
还是不允许在它的内部有其他块元素。

嵌套规则

规则一:块元素可以包含行内元素或某些块元素,但行内元素却不能包含块元素,它只能包含其他的行内元素。
规则二:块元素不能放在p元素里面。
规则三:有几个特殊的块级元素只能包含行内元素,不能再包含块元素,这几个特殊的元素是:h1、h2、h3、h4、h5、h6、p、dt。
规则四:块级元素一般与块级元素并列、行内元素一般与行内元素并列。

CSS布局之溢出处理

通过CSS的溢出样式也能实现iframe功能
CSS 的overflow属性
指定了当一个元素的内容太大,无法容纳在指定区域时,是否要裁剪内容或添加滚动条
值有:

visible: 默认。溢出的内容没有被剪掉,内容会在元素的框外呈现
hidden: 溢出的内容被剪切,其余的内容将不可见
scroll : 溢出的内容被剪掉了,并且增加了一个滚动条来查看其余的内容
auto: 类似于 scroll,但它只在必要时才添加滚动条

如果只希望某一个方向有滚动条,可以采用overflow-xoverflow-y两个样式属性
它们指定的是否只在水平方向(x)或垂直方向(y)上滚动

white-space: nowrap; 让文本在一行上显示,并且溢出的部分隐藏
给 h1 再添加一个text-overflow: ellipsis;
溢出部分变成了省略号

CSS布局之浮动基础

容器浮动以后会脱离标准文档流,相当于飘起来了,不占据原来的位置

浮动样式的属性名为float
值有:

left : 左侧浮动
right : 右侧浮动
none : 不浮动

浮动只能让容器在当前所在行左侧或右侧排列

实现多个容器横向排列,只需要给所有的容器添加浮动样式即可

CSS布局之浮动清理

在三个浮动元素的外层,再包裹一个父元素
这样这个父元素和后面的元素就不存在浮动关系了

对于普通元素来讲,子元素的大小是可以将父元素撑开的
但对于容器里的浮动元素,它们是不占据空间的,也就不能将父元素撑开了
给父元素设置一个边框,会只显示上边框,给父元素设置一个高度,就能完整显示了

如果不想手动设置这个高度,有两种常见的解决方法,来清除浮动的影响:

第一种,为了使父元素的高度保持正常,我们给父元素增加一个样式overflow:auto,含义是:对于超出边界的元素,父元素可以做自动的调整,这样一来父元素的高度就变得正常了

第二种使用clear样式属性,clear这个样式叫做清除浮动,当我们不希望当前元素受到前面浮动元素影响的时候,就给当前元素增加 clear 这个样式,谁不希望受到影响谁就增加 clear 样式
clear 属性常见的值有三个:
分别是leftrightboth
当 clear 的值为 left 的时候,表示当前元素不受到左浮动的影响
当 right 表示当前元素不受到右浮动的影响。
当 both 表示当前元素既不受到左浮动影响也不受到右浮动影响。

CSS布局之定位

position属性指定了一个元素定位方式
它有五个不同的类型值:

static:静态定位
relative: 相对定位
fixed: 固定定位
absolute: 绝对定位
sticky: 粘性定位

给元素设置了position属性后
再使用 top、bottom、left 和 right 属性
对元素进行定位

.box {
    position: sticky;
    top: 100px;
    bottom: 10px;
    left: 20px;
    right: 5px;
}

相对定位

relative

position: relative 相对样式需要配合left、top、right、bottom这些定位属性才能生效。
relative 相对的是容器自身的屏幕坐标 0,0 点。
容器位置发生位移后,原来占据的空间依然保留。
默认会覆盖没有定位的容器。

.box2 {
    background-color: skyblue;
    /* 相对定位 */
    position: relative;
    left: 50px;
    top: 50px;
}

相对定位

绝对定位

绝对定位的元素会脱离文档流。
绝对定位的参照点为,有定位设置的离他最近的祖先元素的 0,0 点坐标。
绝对定位的容器默认会覆盖没有定位的容器

绝对定位参照父元素和body定位

.box2 {
    /* 绝对定位 */
    position: absolute;
    left: 50px;
    top: 50px;
}

在这里
absolute 绝对的是容器自身的屏幕坐标 0,0 点。

可以改变其0,0点位置

.container {
    display: inline-block;
    margin-top: 100px;
    margin-left: 100px;
    position: relative;   #这里设置一个positon
}

static为静态定位,
设置position:static 无法改变坐标

固定定位

直接参照千古图文吧

懒得做笔记了

定位

CSS布局之定位的堆叠顺序

z-index属性:

表示谁压着谁。数值大的压盖住数值小的。

特性:

(1)属性值大的位于上层,属性值小的位于下层。

(2)z-index值没有单位,就是一个正整数。默认的z-index值是0。

(3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

(4)只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用

(5)从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。

容器的堆叠顺序的计算,是先比较同级容器的。子容器是不会超出父容器的堆叠顺序的。

觉得有帮助可以鼓励下博主哦~感谢!
作者:rainy
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者哦~
上一篇
下一篇