1、css样式表中 ！improtant原则
作用 ：强制调整优先级（一定是最后显示的），打破了优先级foot
<style type="text/css"> .div{ background-color: red; width: 200px; height: 100px; border: 1px solid aqua; } span{ background-color: chartreuse !important; width: 100px; height: 98px; border: 1px solid blueviolet; display: inline-block; } </style> </head> <body> <div class="div"> <span></span> </div>
2、font-weight：; 调整字体粗细 取值可英文可数字，数字范围为100~900
<style type="text/css"> .div{ background-color: red; width: 200px; height: 100px; line-height: 100px; text-align: center; font-weight: lighter; border: 1px solid aqua; } span{ background-color: chartreuse !important; width: 100px; height: 98px; border: 1px solid blueviolet; display: inline-block; font-weight: bold; text-align: center; line-height: 98px; } </style> </head> <body> <div class="div"> 留白 <span>留白</span> </div> </body>
3、letter-spacing ：;字符间距
span{ background-color: chartreuse !important; 100px; height: 98px; border: 1px solid blueviolet; display: inline-block; font-weight: bold; text-align: center; line-height: 98px; letter-spacing: 3px; } </style> </head> <body> <div class="div"> 留白 <span>留白</span> </div>
4、text-indent: ; 首行缩进
span{ 100px; height: 98px; border: 1px solid transparent; display: inline-block; text-indent: 1em; } </style> </head> <body> <div class="div"> <span>页面留白</span> </div> </body>
5、text-decoration: ; 字体下划线
a{ text-decoration: none; } </style> </head> <body> <div class="div"> 留白 <span>留白</span> <a href="#">留白</a> </div>
6、line-height: ; 行高
span{ 100px; height: 98px; border: 1px solid blueviolet; display: inline-block; line-height: 98px; } </style> </head> <body> <div class="div"> <span>留白</span> </div> </body>
7、box-sizing:border-box; 指定宽高度，确定元素边框
span{ 100px; height: 98px; border: 1px solid blueviolet; display: inline-block; box-sizing: border-box; } </style> </head> <body> <div class="div"> <span></span> </div> </body>
8、border-radius: ; 边框弧度
span{ 100px; height: 98px; border: 1px solid blueviolet; display: inline-block; border-radius: 20%; } </style> </head> <body> <div class="div"> <span></span> </div> </body>
9、vertical-align: ; 水平垂直
10、除了边框透明transparent外可以使用opacity来表示（取值最大为1，最小为0）
11、clear浮动清除的3个值 ：left right both
span{ 20px; height: 18px; border: 1px solid transparent; display: inline-block;
margin: 50px 50px;
clear: left;
} </style> </head> <body> <div class="div"> <span>留白</span> </div> </body>
12、overflow 当内容溢出边框时
span{ 100px; height: 98px; border: 1px solid transparent; display: inline-block; overflow: hidden; } </style> </head> <body> <div class="div"> <span>页面留白</span> </div> </body>
13、cursor 光标属性
span{ 100px; height: 98px; border: 1px solid transparent; display: inline-block; cursor: pointer; } </style> </head> <body> <div class="div"> <span></span> </div>
14、box-shadow 阴影的添加
span{ 100px; height: 98px; border: 1px solid transparent; display: inline-block; box-shadow: 20px 20px 20px 20px chartreuse; } </style> </head> <body> <div class="div"> <span></span> </div> </body>