CSS学习笔记 Day 5

最新推荐文章于 2024-07-09 17:45:40 发布

小喾苦

最新推荐文章于 2024-07-09 17:45:40 发布

阅读量62

点赞数

文章标签： css 学习 css3 前端

CC BY-NC-SA 署名-非商业性使用-相同方式共享

本文链接：https://blog.csdn.net/qq_55207049/article/details/128757320

版权

CSS Day 5

CSS学习笔记 by 小喾苦

常见的 CSS 初始化语句

/* 清除元素默认的内外边距 */
* {
	margin: 0;
	padding: 0;
}

/* 清除列表样式 */
li {
	list-style: none;
}

/* 去掉 button 默认自带的边框 */
button {
	border: none;
}

/* 去除 a 的下划线 */
a {
	text-decoration: none;
}

/* 声明清除浮动的样式 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /* IE6、IE7专门清除浮动样式 */
}

CSS 书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow （建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / white-space / break-word
其他属性（CSS3）：content / cursor / border-radius / text-shadow / background:linear-gradient ……

.jdc {
    dispaly: block;
    position: relative;
    float: left;
    width: 100%;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}