【CSS】cascade style sheet 层叠样式表
1.概念
决定页面的样式.
1.颜色
2.布局
2.CSS与HTML的结合方式
3.CSS的选择器
4.CSS的基本语法
5.CSS的常用属性
6.盒子模型
背景颜色
body{
background-color: pink
background-image: url("001.jpg")
background-repeat: no-repeat;
(横轴重复,纵轴重复)
background: green url( ) repeat-x fixed
}
盒子模型
万物皆盒子,
1.配色
2.布局
盒子模型解决页面的布局问题。
itcast传智博客
块级标签:占的是一行
文章图片
image.png
行内标签:占行内的一部分。不能嵌套块级标签。
盒子模型div嵌套:
div{
border-color: red;
border-width: 1px;
border-style: solid;
}
one{
width: 300px;
height: 300px;
padding-left: 100px;
内边距(外面到里面的距离)
}
two{
width: 100px;
height: 100px;
margin-left: 100px;
外边距(里面div到外面的距离)
}
one{
/*
1个属性时:4个方向
2个属性时:第一个属性决定上下 第二个决定左右
3个属性时:第一个上,第二个左右,第三个下
*/
}
推荐阅读
- 前端|瞎几把总结一波
- javascript案例|JS实现可拖拽的模态框
- css|css子元素选择父元素的实现
- vue小项目|vue小项目(二)—— 购物车的完整实现
- 笔记|HTML5中的线性渐变(linear-gradient)与径向渐变(radial-gradient)
- 笔记|利用CSS实现任意形状的文字环绕
- 编程语言|【程序源代码】驾校模拟考试系统
- linux|阿里前端面试题(最全),持续更新中
- 代码实例效果精选|哈哈哈 原来使用jQuery+CSS就可以实现图片自动切换轮播效果是那么简单的事情 搞了个小米商城官网淡入淡出自动轮播图效果来看看也挺好