码迷,mamicode.com
首页 > Web开发 > 详细

四十一、CSS相关属性

时间:2019-09-07 13:39:36      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:auto   idt   取值   背景图   考点   width   offset   wql   table   

CSS属性相关

宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

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

 <style>
        div {
            height: 50px;
            width: 100px;
        }
        /*给行内标签设置长宽没有任何影响*/
        span {
                height: 50px;
                width: 100px;
            }
    </style>

 

字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
 
简单实例:
 <style>
        p {
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;
            font-weight: lighter;
            /*color: red;*/
            /*color: #4e4e4e;*/
            /*color: rgb(128,128,128);*/
            /*color: rgba(0,0,0,1.0);  最后一个参数只能调节颜色的透明度 不能调节文本*/
        }
    </style>

字体大小

p {
  font-size: 14px;
}

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

字重(粗细) 

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

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

文本颜色

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

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

  • 十六进制值 - 如: FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red

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

文字属性

文字对齐

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

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字属性
     <style>
                                              对齐排列
        p {
            font-size: 16px;                  字体大小
            text-indent: 32px;                缩进多少
            /*text-align: center;*/           居中对齐
            /*text-align: left;*/             左对齐
            /*text-align: right;*/            右对齐
            /*text-align: justify;*/
                                               字体装饰

            /*text-decoration: underline;*/    下划线
            /*text-decoration: overline;*/     上划线
            /*text-decoration: line-through;*/ 删除线
        }
        a {
            text-decoration: none;             消除装饰(如下划线)
            color: orange;
        }
        a:hover {                               鼠标触碰
            color: blue;
        }
    </style>

 

文字装饰

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

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

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

a {
  text-decoration: none;
}

首行缩进

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


  p { text-indent: 32px; }

背景属性

背景属性
      style>
        div    {
            background-color: orange;       # 背景颜色
            height: 500px;                  # 高度500
            width: 500px;                   # 宽度500
            background-image: url("111.png");  /*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*/
            background-repeat: no-repeat;       # 不填充
            background-repeat: repeat-x;        # 水平填充
            background-repeat: repeat-y;        # 垂直填充
            background-position: center center; # 水平中心,垂直中心
            background-position: 10px 30px;  /*第一个参数调节的是左右  第二个参数调节的上下*/

            background: orange url("代码/111.png") no-repeat center center;  代码简写 不填充 水平中心对齐 垂直中心对齐
        }
技术图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            background-color: red;
        }

        .c2 {
            height: 400px;
            background-color: green;
        }

        .c3 {
            height: 500px;
            background: url("111.png");
            /*background-attachment: fixed;  <!--把图片固定在这不动,上下拖动时候始终在这显示-->*/
        }

        .c4 {
            height: 400px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>
背景图片示例

边框属性 

border-width
border-style
border-color

边框样式

描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
 <style>    border边框
        div {
            /*border-color: red;*/       边框颜色红色
            /*border-style: solid;*/     边框是实线
            /*border-width: 1px;*/       边框厚度1像素

            /*border: 3px solid black;  简写同上*/  厚度 实线 黑色
            /*border: solid 3px blue;*/
            border: dashed green 3px;

        }
        p{
            border-left: 3px solid red;         边框的左边 厚度3像素 实线 红色
            border-bottom: 10px dotted green;   边框的下边 厚度10像素 虚线 绿色
            border-top: 1px dashed orchid ;     边框的顶部 厚度1像素 线 颜色
            border-right: 10px solid dimgray;    边框的右边 厚度10 实线 颜色
        }
    </style>

画圆

border-radius

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

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

 <style>
        div{
            height: 400px;
            width: 400px;
            background: blue;
            border: 3px solid black;
            /*border-radius: 50%;    注意在画圆宽度和高度要一致 ,半径为50%*/
        }
    </style>

display属性

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

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

 

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

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

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

 

盒子模型
margin:用来调节盒子与盒子之间的距离(标签与标签之间的距离)
border:盒子的包装厚度(即边框的厚度)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
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的常用简写方式:

  • 提供一个,用于四边;
  • 提供两个,第一个用于上-下,第二个用于左-右;
  • 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
  • 提供四个参数值,将按上-右-下-左的顺序作用于四边;
技术图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin-left: 0;
            margin-top: 0;
            margin-bottom: 0;
            margin-right: 0;
        }
        .c1 {
            width: 100px;
            height: 100px;
            border: 3px solid red;
            margin-bottom: 20px;
        }

        .c2 {
            width: 100px;
            height: 100px;
            border: 3px solid green;
            margin-top: 30px;
            /*margin-left: 10px;   距离body标签左边10像素*/
        }
        .c3{
            width: 20px;
            height: 20px;
            border: 2px solid green;
            /*margin: 10px 20px 30px 40px; !* 上右下左(顺时针)*!*/
            /*margin: 10px 20px; !*第一个参数是上下,第二个参数左右*!*/
            margin: 10px auto; /*水平居中*/
        }
        .c4 {
            width: 200px;
            height: 200px;
            border: 2px solid blue;
            /*padding-left: 20px;*/
            /*padding-top: 50px;*/
            /*padding-bottom: 40px;*/
            /*padding-right: 30px;*/
            /*padding: 10px 20px 30px 40px; !*上右下左*!*/
            padding: 10px 20px;  /*第一个参数是上下,第二个参数左右**/
        }
    </style>

</head>
<body>
<div class="c1">
    <div class="c3"></div>
</div>
<div class="c2"></div>
<div class="c4">div</div>
</body>
</html>
盒子模型
浮动
只要是页面布局都要用到浮动

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

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

关于浮动的两个特点:

  • 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动带来的影响:
脱离文档流,造成父标签塌陷
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
<style>
        body{
            margin: 0;
        }
        /*#d1{*/
        /*    border: 3px solid black;*/
        /*}*/
        .c1{
            width: 50px;
            height: 50px;
            background-color: blue;
            /*display:inline-block;*/
            float: left;
        }
             .c2{
            width: 50px;
            height: 50px;
            background-color: red;
                     float: left;
                 /*display:inline-block;*/
        }
    </style>

浮动的页面布局

   <style>
        body{
            margin: 0;
        }
        .c1{
            height: 1000px;
            width: 20%;
            float: left;
            background-color: red;
        }
        .c2{
            height:1000px;
            width: 80%;
            float: right;
            background-color:skyblue;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>

三种取值

left:向左浮动

right:向右浮动

none:默认值,不浮动

参考示例

clear

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

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

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

清除浮动

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

主要有三种方式:

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

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

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

解决浮动带来的影响

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            border: 3px solid black;

        }
        .c2{
            width: 80px;
            height: 80px;
            background-color: red;
            float: left;
        }
        .c3{
            width: 80px;
            height: 80px;
            background-color:blue;
            float: left;
        }
        /*.c4{*/
        /*    !*height: 80px;*!*/
        /*    clear: left; !*规定标签左边不能有浮动的元素*!*/
        /*}*/
        .clearfix:after{
            content: "";
            clear: both;  /* 规定两边不能有浮动元素*/
            display: block;
        }
    </style>
</head>
<body>
<div class="c1 clearfix">
    <div class="c2"></div>
    <div class="c3"></div>
<!--    <div class="c4"></div>-->
</div>
</body>
</html>

 overflow溢出属性 

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

 

overflow(水平和垂直均设置)
overflow-x(设置水平方向)
overflow-y(设置垂直方向)
<style>
        div{
            height: 50px;
            width: 50px;
            border: 3px solid red;
            /*overflow: hidden;   !*隐藏*!*/
            overflow: auto;   /*自动*/

        }
    </style>
技术图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: dimgray;
        }
        .c1{
            width: 150px;
            height: 150px;
            border: 5px solid white;
            border-radius: 50%;
            /*background-image: url("111.png");  背景图片*/
            overflow: hidden;
        }
img{
    width: 100%;
}
    </style>
</head>
<body>
<div class="c1">
<img src="111.png">
</div>
</body>
</html>
圆形图像示例

定位(position)

static

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

relative(相对定位,相对于标签本身原来的位置

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

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

技术图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .c1{
            width: 100px;
            height: 100px;
            background-color: red;
            top:100px;
            left: 100px;
            position: relative;  /*relative相对定位*/
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
相对定位

absolute(绝对定位,相对于已经定位过的父标签(比如电商网站你鼠标放在一个功能,弹出他的选项)

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

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

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

技术图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height: 50px;
            background-color: orange;
            position: relative;
        }
        .c2{
            height: 200px;
            width: 400px;
            background-color: red;
            position: absolute;
            top:50px;
            left: 100px;
        }
    </style>
</head>
<body>
<div class="c1">购物车
    <div class="c2">
        啥也没有-没钱
    </div>>
</div>
</body>
</html>
绝对定位

 

fixed(固定,相对于浏览器窗口固定在某一个位置(回到顶部)

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

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

技术图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            border: 3px solid black;
            width: 80px;
            height: 40px;
            position: fixed; /*fixed固定的*/
            right: 20px;
            bottom: 30px;

        }
        .c2{
            height: 4000px;
        }
    </style>
</head>
<body>
<div class="c2"></div>
<div class="c1">我访问访问</div>
</body>
</html>
固定定位
是否脱离文档流:
脱离文档流:
1.浮动
2.绝对定位
3.固定定位
非脱离文档流:
1.相对定位

z-index


#i2 {
  z-index: 999;
}

设置对象的层叠顺序。


  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="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            background-color:rgba(128,128,128,0.4);
            position: fixed;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
        }
        .c3{
            width: 200px;
            height: 100px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -25px;
            margin-left: -100px;
        }

    </style>
</head>
<body>
<div class="c1">你好啊as发发发非</div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
模态框示例

opacity

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 50px;
            background-color: rgba(128,128,128,0.3); /* 只是修改背景颜色透明度*/
        }
        .c2{
            opacity: 0.3;  /*整个透明度都修改*/
            background-color: #4e4e4e;
        }
    </style>
</head>
<body>
<div class="c1">fwefwwefwfewfwf</div>
<div class="c2">wdwefrgtrgrtgrt</div>
</body>
</html>

综合示例

顶部导航菜单

技术图片
<!DOCTYPE HTML>
<html>
<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>li标签的float示例</title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: #b0b0b0; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服务</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">优品</a></li>
  </ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>

顶部导航菜单示例
View Code

 



四十一、CSS相关属性

标签:auto   idt   取值   背景图   考点   width   offset   wql   table   

原文地址:https://www.cnblogs.com/wukai66/p/11480149.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!