CSS基础学习指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36974981/article/details/79131602

今天是学习CSS的第二天，进一步学习了盒模型、text文本、背景、浮动的四个属性，其中浮动最是重点。

盒模型：padding、border、margin

padding和margin的使用方法相同，既可以设置边距相同（padding: 20px; ），又可以单独设置一个边的边距。

padding-top:20px;    /* 上 */
padding-right:30px;  /* 右 */
padding-bottom:20px; /* 下 */
padding-left：40px;  /* 左 */
或者
padding: 20px 30px 20px 40px;  /*顺序是：上  右  下  左*/
padding: 20px 30px 40px;  /*上  右左  下*/
padding: 20px 30px;  /*上下  右左  */

border可以合起来写（border: 粗细线型颜色;），也可以将属性分开单独写（分别是：border-width border-style border-color），更可以单独控制每个边的各个属性。

border-left-width: 40px;
border-left: 20px solid #ccc;
border-right-style: solid;
border-top-color: #0f0;

实例——透明三角:
保留左侧边框的颜色, 其余三边的颜色均设为 transparent （透明）

span{
        display: inline-block;
        border-width: 40px;
        border-style: solid;
        border-left-color: #f00;
        border-right-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent
}

两种盒模型
显示宽度 = width + padding + border ( box-sizing:content-box; )
显示宽度 = width（ box-sizing:border-box;）
一开始是IE的盒模型,后来在CSS3可以通过设置属性来设置盒模型。

text文本
font-size: 16px;————— 文字大小浏览器默认的字体大小是16px
color: #f00; ——————–文字的颜色
font-family: “宋体”,”微软雅黑”,monaco; ————–设置字体
—————逗号分隔设置多个字体,
—————如果没有第一个就用第二个,
—————如果没有第二个就用第三个…
font-weight: bold;————- 设置文本的加粗属性
————–bold 加粗；bolder 更粗
————–100 - 900之间： 500 正常； 600↑ 加粗； 400↓变细。
font-style: italic;————– 斜体
letter-spacing: 40px;——- 字间距
line-height: 200px;———- 行高
line-height: 1.5; ————–设置比例
line-height = height;———单行文字垂直居中
text-align: center ;————水平方向的对齐方式
————left 默认左对齐；center 居中对齐；right 右对齐
text-indent: 30px;———— 首行缩进
text-decoration: none;——-设置下划线样式
————none 没有下滑线；underline 下划线；
————overline 上划线；line-through 删除线

background

background-color: #f00;————————– 背景色
background-image: url(图片的路径);———-图片背景
background-repeat: no-repeat;—————–背景重复
—————————repeat 默认重复直到铺满整个容器； no-repeat 不要重复；
—————————repeat-x x轴方向重复；repeat-y y轴方向重复
background-position: center;——————-背景图片的位置
—————————10px 20px;（设置尺寸 x 10 y 20）
—————————center 居中如果只有一个值那么x y 都是这个位置
—————————50% 20%；
—————————left top; 默认左上角
background-position-x————————— 同上background-position;
—————————–x方向背景位置旧版本的ff浏览器不支持
background-position-y————————— 同上background-position;
—————————–y方向背景位置旧版本的ff浏览器不支持
background-size:——————————— 控制背景图片大小
—————————-background-size: 400px 300px; 设置具体尺寸
—————————-background-size: 100% 50%; 设置百分比
————————— background-size: cover; 填充完全覆盖不变形
—————————-background-size: contain; 适应有一个边覆盖（可能是宽也可能是高，这取决于宽高比）不变形
background-attachment: fixed; ————–是否随着页面滚动
—————————-默认值 scroll 滚动
—————————-fixed 固定不滚动简单视差效果

Float 浮动

功能：使元素横向排列
添加浮动
- 方式：
  - 左浮动
    float:left;
  - 右浮动
    float:right;
清除浮动
- 说明：多数子元素浮动了以后,一定要记住清除浮动
  子元素浮动以后,父元素没有高度了(高度塌陷)
- 方式：
  - 设置高度
    缺点：有时候不知道高度是多少
  - 父元素也跟着浮动
    缺点：父级元素浮动也有副作用
  - overflow: hidden/auto/scroll; 溢出:隐藏
    缺点：有时候不希望出现溢出隐藏/滚动
  - 在子元素的最后添加空元素,设置属性clear:both(clear:left,clear:right)
    缺点：多了一个没有意义的空元素
  - .clearfix方式，代码如下
    .clearfix:after{
    content: ”;
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    }
  - position: absolute/fixed

补充

display
- display:inline 内联元素
  不是独占一行，不能直接设置宽高
  a span 样式元素
- display:block 块级元素
  独占一行，可以设置宽高
- display:inline-block; 内联元素（内联块级元素）
  不是独占一行，但是可以设置宽高
  img input
- display:none; 隐藏

<head>
    a:nth-of-type(2){display:none;}
</head>
<body>
    <a>link</a><a>link</a><a>link</a>
</body>

伪类选择器
:hover 鼠标移入移出抬起时的效果
:active 鼠标按下抬起时的效果

<head>
        <meta charset="utf-8" />
        <title>CSS引入方式</title>
        <style>
            a:link{color: #ff0;}
            .external:link{color: #000;}

            :link{color:#03c;}
            :visited{color:#f00;}

            h1 {font-size: 16px;}
            a,div {
                display: block;
                margin-top: 10px;
                padding: 10px;
                border: 1px solid #ddd;
            }

            a:hover,
                div:hover {
                background: #ddd;
                color: #f00;
            }

            a:active,div:active {
                background: #ddd;
                color: #ff0;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="http://write.blog.youkuaiyun.com/postlist/0/all/draft" class="external" target="_blank">外部链接</a></li>
            <li><a href="http://mp.blog.youkuaiyun.com/mdeditor" target="_blank">内部链接</a></li>
            <li><a href="http://write.blog.youkuaiyun.com/postlist" class="external" target="_blank">外部链接</a></li>
            <li><a href="http://baidu.com" target="_blank">内部链接</a></li>
            <h1>请将鼠标分别移动到下面2个元素上</h1>
            <a href="http://souhu.com">我是一个a</a>
            <div>我是一个div</div>

        </ul>
    </body>

注：超链接状态顺序：
a:link {}
a:visited {}
a:hover {}
a:active {}注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括