CSS

2018-10-05  本文已影响0人  Vsion8980

非原创，摘抄自网络，仅供翻阅

引入方式

CSS属性

CSS选择器

优先级：标签名选择器<类选择器<id选择器<行间样式

盒模型

文本样式

属性 注释
font-size 文字大小（一般均为偶数）
font-family 中文 SimSun (宋体) SimHei (黑体) Microsoft YaHei (微软雅黑) STKaiti (华文楷体) 英文 Arial Georgia Helvetica sans-Serif
color 文字颜色（英文、rgb、十六位进制色彩值）
line-height 行高 (具体的数值)
text-align 文本对齐方式 （left center right）
text-indent 首行缩进（em缩进字符或者是具体的数值）
font-weight 文字着重 （normal bold bolder 100~900）
font-style 文字倾斜 (normal italic oblique)
text-decoration 文本修饰 (none underline overline line-through)
letter-spacing 字母间距 (具体的数值)
word-spacing 单词间距（以空格为解析单位）
属性 复合写法
background: background-color background-image background-position background-repeat
border border-width border-style border-color
padding 上 右 下 左
margin 上 右 下 左
font： font-style    font-weight     font-size/line-height    font-family；

常用样式

属性 解释
width 宽度
height 高度
background 背景
border 边框
padding 内边距
margin 外边距
font-size 文字大小
font-family 字体
color 文字颜色
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进
font-weight 文字着重
font-style 文字样式
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距

浮动

脱离文档流：标签浮动后，不受父级标签的控制。

例子：

浮动前：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            border: 10px solid red;
        }
        .box>div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }
    </style>
</head>
<body>


<div class="box">
    <div>我是盒子1</div>
    <div>我是盒子2</div>
    <div>我是盒子3</div>
    <div>我是盒子4</div>
    <div>我是盒子5</div>
</div>

</body>

网页效果：


浮动前效果

让子级盒子浮动：
（子级盒子css变化）：

        .box>div{
            width: 100px;
            height: 100px;
            float: left;  //浮动
            border: 10px solid red;
        }

效果：


浮动

子级盒子的浮动使得其子级div失去父级box的控制，由原来子级撑起父级的宽度/高度变得失效。

浮动的元素提升层级半级：

想要理解“浮动元素提升层级半级”，就要先知道div基础属性与div所包含的内容是相互分离的：

div侧视图
div非浮动
当div浮动时，
div浮动1
div浮动2

实例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            float: left;
            border: 5px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 5px solid red;
        }
    </style>
</head>
<body>


<div class="box1">
    我是盒子1
</div>
<div class="box2">
    我是盒子2
</div>


</body>

效果图：


效果图

定位： 把一个元素 按照一定的方式 定到页面的某一个位置

position

定位常用方式：子绝父相
即父级为相对定位，子级为绝对定位。

圆角

border-radius：

背景裁切

background-clip：

渐变

盒阴影/文字阴影

box-shadow/text-shadow:[inset] h-shadow v-shadow blur spread color;

1.[inset]:默认为外阴影，inset为内阴影
2.h-shadow：阴影水平偏移量
3.v-shadow：阴影垂直偏移量
4.blur：阴影模糊半径
5.spread：阴影扩展半径
6.color：阴影颜色

蒙版

-webkit-mask

过渡

transition: property duration timing-function delay;

1.property:规定应用过渡效果的 CSS 属性的名称(none、width、height、all)
2.duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）
3.timing-function：规定过渡效果的速度曲线（linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)）

time-function 曲线
linear linear
ease ease
ease-in ease-in
ease-out ease-out
ease-in-out ease-in-out
cubic-bezier(n, n, n, n)） cubic-bezier, example

4.delay：规定过渡效果何时开始（以秒或毫秒计，允许负值）

过渡常用的触发方式：伪类触发

变换

transform:

  1. translate（位移）
  2. rotate（旋转）
  3. scale（缩放）

transform-origin：切换变换原点

3D

首先给需要3D转换的元素的父级添加3D环境和景深

transform-style:preserve-3d; //添加3d环境
perspective: XXX px; //景深
上一篇 下一篇

猜你喜欢

热点阅读