前端CSS属性相关

时间 2019-11-19

标签前端 css 属性相关栏目 CSS 繁體版

原文原文链接

CSS属性相关

宽和高

width属性能够为元素设置宽度html

height属性能够为元素设置高度浏览器

块级标签才能设置宽度，内联标签的宽度由内容来决定ide

字体属性

文字字体

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

字重(粗细)

font-weight用来设置字体的粗细性能

文本颜色

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

颜色是经过CSS最常常的指定：网站

　　十六进制如 #FFF000ui

　　一个RGB 如 RGB(255,0,0)url

颜色的名称如 redspa

还有rgba(255,0,0,0.3) 第四个值为alpha，制定了色彩的透明度/不透明度,他的范围为0~1之间

文字属性

文字对齐

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

文字装饰

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

经常使用的去掉a标签默认的下划线：

a {
  text-decoration:none;
}

首行缩进

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

p {
  text-indent:32px;
}

背景属性

/*背景颜色*/
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;

使用背景图片的一个常见案例就是不少网站会把不少小图标放在一张图片上，而后根据位置去显示图片。减小图片的请求。

background-attachment属性这个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg")  center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

图片不动

边框

边框属性

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

一般用的简写方式：

#i1 {
  border: 2px soild red;
}

边框样式

border-radius

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

将border-radius设置为长或高的一半便可获得一个圆

display属性

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

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

visibility:hedden: 能够隐藏某个元素，但隐藏的元素仍需占用与未隐藏以前同样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none:能够隐藏某个元素，但隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，并且该元素本来的占用空间也从布局上消失。

CSS盒子模型

　　margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隙，从视觉的角度上达到相互隔开的目的。

　　padding:　　用于控制内容与边框之间的距离.

　　border(边框):　　围绕在内边距和内容外的边框

　　content（内容）　　盒子的内容，显示文本和图像

图片以下：

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属性只会对自身起做用，而不会影响其余元素

清除浮动

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

主要有三种方式：

　　固定高度

　　伪元素清除法

　　overflow:hidden

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

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

overflow溢出属性

　　overflow(水平和垂直均设置)

　　overflow-x(设置水平方向)

　　overflow-y（设置垂直方向）

定位（position）

static

static 默认值，无定位，不能看成就对定位的参照物，而且设置标签对象的left,top等值是不起做用的。

relative(相对定位)

相对于标签自身原来的位置

absolute(绝对定位)

相对于已经定位过的父标签

但只给你一个父标签的长宽让你作定位

fixed(固定定位)

相对于浏览器窗口固定在某个位置

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回顶部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>

返回顶部按钮样式示例

返回顶部按钮样式示例

是否脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
             height: 50px;
            width: 100px;
            background-color: dodgerblue;
        }
        .c2 {
             height: 100px;
            width: 50px;
            background-color: orange;
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div style="height: 100px;width: 200px;background-color: black"></div>
</body>
</html>

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
            height: 50px;
            width: 100px;
            background-color: red;
            position: relative;
        }
        .c2 {
            height: 50px;
            width: 200px;
            background-color: green;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="c1">购物车
    <div class="c2">空空如也~</div>
    <div style="height: 50px;width: 100px;background-color: deeppink"></div>
</div>

</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="c1" style="height: 50px;width: 500px;background-color: black"></div>
<div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div>
<div class="c3" style="height: 10px;width: 100px;background-color: green"></div>

</body>
</html>

固定定位

上述例子可知：

脱离文档流：

　　浮动元素都是脱离文档流