CSS、响应式

1、text-align ：

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

left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

文本阴影：text-shadow: h-shadow v-shadow blur color。前两项是必须的，后两项不是必须。

文字填充色： -webkit-text-fill-color: lightblue;
文字添加边框: -webkit-text-stroke:width，color；
文本缩进：text-indent: 2em;
当文本溢出包含元素时：text-overflow: clip;

clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

2 margin(top, right, bottom, left)。

简写属性在一个声明中设置所有外边距属性。块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

3、font

设置字体：font-family: 字体名。设置字体大小：font-size:大小。字体颜色：color：颜色。行高：line-height: 2em; （em 字体大小）。

4、background：

// 设置背景颜色
background-color: dodgerblue;

// 设置图片背景
background-image: url("logo.gif");

// 背景图像的尺寸  cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。按照最长边
// contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 按照最短边
background-size: cover;

// 背景重复设置  横向重复(repeat-x)、纵向重复(repeat-y)
background-repeat: repeat-x;

//scroll 默认值。背景图像会随着页面其余部分的滚动而移动。fixed 当页面的其余部分滚动时，背景图像不会移动。
background-attachment: fixed;
// 背景图片起始位置
background-position: center;

// 图片太小时是否重复
background-repeat: no-repeat;

5、border

border-radius:top left,top right, bottom right, bottom left。分别代表四个角的直径。

border-radius:h-top left,h-top right, h-bottom right, h-bottom left/v-top left,v-top right, v-bottom right, v-bottom left。斜杠前面代表四个角的水平直径，后面代表四个角的垂直直径。

border-image: 图片、图片剪裁位置、重复性;

重复：repeat（重复、round（平铺）和stretch（拉伸）。其中，stretch是默认值。

6、overflow：处理溢出元素内容区的内容会。

hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

white-space：处理元素内的空白。

nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。

7、响应式：

必须要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 。

宽度为设备宽度，初始缩放为1.0，最大缩放比例为1.0，用户不允许缩放。

响应式的样式要定义在@media all and (min-width: 600px) and (max-width: 1000px){} 意思是：all--->代表所有设备，当宽度在600px和1000px之间应用下面样式，所有的条件用and拼接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        #content{
            width: 1100px;
            height: 800px;
            margin: 0 auto;
            background-color: red;
        }
//      当宽度大于700px小于1000px应用此样式
        @media all and (min-width: 700px) and (max-width: 1000px){
            #content{
            width: 500px;
            height: 600px;
            margin: 0 auto;
//          清除浮动
            clear: both;
            background-color: green;}
        }
//      当宽度小于700px应用此样式
        @media all and (max-width: 700px){
            #content{
            width: 200px;
            height: 400px;
            margin: 0 auto;
            background-color: yellow;
        }
}

    </style>
</head>
<body>
<div id="content"></div>
</body>
</html>

也可以在Link中直接判断设备尺寸，引用不同css。

<link rel="stylesheet" type="text/css" herf="a.css" media = "screen and (min-width:400px)>

1、text-align ：

2 margin(top, right, bottom, left)。

3、font

4、background：

5、border

7、响应式：

最后我们来总结下响应式布局的实现原理

首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）

猜你喜欢