其他分享
首页 > 其他分享> > css最后一课

css最后一课

作者:互联网

label标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <label for="a">姓名:</label>
    <input type="text" id="a">
    <label for="b">男</label>
    <input type="radio" id="b" name="sex">
    <label for="c">女</label>
    <input type="radio" id="c" name="sex">
</form>
<label for="c">点我</label>
</body>
</html>

就是给文字绑定了某个radio的id之后,点击这个文字,那个radio也会被选中。

字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例:

body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }

字体大小

p { font-size: 14px; }

如果设置成inherit表示继承父元素的字体大小值。

字重(粗细)

font-weight用来设置字体的字重(粗细)。

描述
normal 标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值,默认值,

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线:

a { text-decoration: none; }

首行缩进

将段落的第一行缩进 32像素:

p { text-indent: 32px; }

去除li标签的样式

list-style: none;

文字之间的距离

将文字的间距调整为5像素:

p {
letter-spacing: 5px;
}

背景属性

/*背景颜色*/
background-color: red; /*背景图片*/ background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页,就是说一张如果不够,它会不停复制铺满。
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
*/ background-repeat: no-repeat; /*背景位置*/ background-position: left top;
/*background-position: 200px 200px;*/

支持简写:

background:#336699 url('1.png') no-repeat left top;

边框

边框属性

#i1 { border-width: 2px; border-style: solid; border-color: red; }

通常使用简写方式:

#i1 { border: 2px solid red; }

边框样式

描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式,如下所示:

#i1 { border-top-style:dotted; border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border:orange solid 1px;
            border-radius: 50%; /*当他设置为50%的时候是一个圆,0的时候是一个方*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

display属性

用于控制HTML元素的显示效果。

意义
display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别:

visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

display:"none":就是不显示

display:"block":把标签变成块级标签

display:"inline":把标签变成行级标签

display:"inline-block":是标签同时具有块级标签和行级标签的特点。

盒子类型

img

margin外边距

.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }

推荐使用简写:

.margin-test { margin: 5px 10px 15px 20px; }

顺序:上右下左

常见居中:


.mycenter { margin: 0 auto; }

padding内填充

.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }

推荐使用简写:

.padding-test { padding: 5px 10px 15px 20px; }

顺序:上右下左

补充padding的常用简写方式:

float浮动

在 CSS 中,任何元素都可以浮动。

浮动元素会生成一个块级框,而不论它本身是何种元素。

关于浮动的两个特点:

三种取值

left:向左浮动

right:向右浮动

none:默认值,不浮动

浮动会造成塌陷,所以需要clear处理

clear

clear属性规定元素的哪一侧不允许其他浮动元素。

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

注意:clear属性只会对自身起作用,而不会影响其他元素。

清除浮动

清除浮动的副作用(父标签塌陷问题)

主要有三种方式:

伪元素清除法(使用较多):

.clearfix:after { content: ""; display: block; clear: both; }

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: gold solid 2px;
            overflow:hidden;
            border-radius:50%;
        }
        img{
            max-width: 200px;
            min-height: 200px;

        }
    </style>
</head>
<body>
<div>
<img src="1.jpeg" alt="">
</div>
</body>
</html>
描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

max-width最大宽度与min-width最小宽度案例小结
我们设置两个盒子一个“divcss5-min-width”设置对象里img图片最小宽度为200px,而实际图片只有165px,所以图片被拉伸到200px;一个“divcss5-max-width”设置对象里img图片最大宽度为200px限制,而实际对象里图片宽度是375px,这个时候我们设置了此图片最大宽度为200px,所以图片被CSS max-height缩小到200px

定位

static

static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

relative(相对定位)

相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。

absolute(绝对定位)

定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。

另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;}

        .c{
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;
        }
        .a{
            width: 400px;
            height: 400px;
            background-color: gold;
            position: relative;
            float: right;
        }
        .b{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 400px;
            left: 30px;
        }
    </style>
</head>
<body>
<div class="c"></div>
<div class="a">
    <div class="b"></div>
</div>
</body>
</html>

fixed(固定)

fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            height: 1800px;
            background-color: pink;
        }
        .b{
            height: 50px;
            width: 50px;
            background-color: green;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
<div class="a"></div>
<div class="b">点我回去</div>

</body>
</html>

模态框

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁,数值大的压盖住数值小的,
  2. 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  3. z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
  4. 从父现象:父亲怂了,儿子再牛逼也没用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            position:fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 202;
            background-color: rgba(255,192,203,0.4);
        }
        .b{
            position: fixed;
            width: 200px;
            height: 200px;
            background-color: white;
            z-index:201;
            top:50%;
            left: 50%;
            margin: -100px 0 0 -100px;
        }
    </style>
</head>
<body>
<div class="a">asdasd</div>
<div class="b"></div>


</body>
</html>

opacity

用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。

标签:一课,元素,最后,width,margin,200px,border,css,left
来源: https://www.cnblogs.com/chanyuli/p/11667822.html