CSS基础知识(二)
来源:互联网 发布:网络经济犯罪的特点有 编辑:程序博客网 时间:2024/06/04 19:43
background-color:背景颜色
background-image:设定背景图片,需要设置图片的URL地址。
background-repeat:图片的复制选项
repeat:在水平和垂直两个方向上进行复制
norepeat:不复制
repeat-x:在水平方向上复制
repeat-y:在垂直方向上复制也可以将这些属性封装到一个属性background中,使代码更加简洁:
background: greenurl("../img/index.jpg") no-repeatright top;
background-color(背景色)
background-image(背景图片)
background-repeat(重复方式)
background-position(位置)
2.尺寸的相关属性:
常见的height--高度 width--宽度
而max-width表示最大宽度
max-height表示最大高度
min-width表示最小宽度
min-height表示最小高度
3.显示的相关属性
隐藏元素
方法:visibility:hidden;仅仅隐藏内容,该元素所占的位置依然存在
display:none;不仅隐藏内容,而且不占位置
例:
div{
/*visibility: hidden;*/
height: 200px;
display: none;
}
display:可以设置元素的显示模式
inline-block:将块级元素以内联元素形式显示,同时兼具块级元素的某些特征,比如可以使用width和height设置所占位置大小。
inline:将块级元素以内联元素形式显示,此时width和height属性无效,起空间取决于元素的内容。
li{
/*块级元素转换为内联元素*/
display: inline-block;
width: 200px;
background-color: red;
}
span{
/*内联元素转换为块级元素*/
display: block;
}
4.盒子模型
盒子模型可以理解为一个大盒子里面放着一个小盒子,而小盒子又不是紧贴着大盒子,之间保留着一些距离。
margin:外边距
margin-top、margin-right、margin-bottom、margin-left 分别为上、右、下、左的边距表示
使用方式:
margin:30px;表示上下左右外边距都是30px;
margin-left:30px;单独设置上下左右外边距;
而同时,四种边距也可以简写:margin: 10px 20px30px 40px;
内边距:padding;和margin类似
border:边框
broder-width:边框宽度
broder-style:边框线条类型
broder-color:边框的颜色
outline-轮廓线。用法同border
border: 4px dashedblue;
- CSS 基础知识(二)
- css基础知识(二)
- CSS基础知识(二)
- 前端-CSS基础知识(二)
- html+css+javascript 基础知识(二)
- 一周学习HTML5+CSS基础知识(二)
- CSS基础知识整理二
- CSS基础知识总结--《CSS权威指南》阅读笔记(二)
- Web学习篇之---css基础知识(二)
- css和javascript的一些笔记(二) js基础知识
- CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
- CSS 基础知识(一)
- css基础知识(一)
- CSS基础知识(一)
- CSS基础知识(三)
- HTML/CSS基础知识总结二:选择器
- .NET基础知识(二)
- java 基础知识(二)
- iOS开发 HTTP协议详解
- 工作中遇到的各种问题
- Qt中的各种控件简介
- CSS3 --- 选择器
- 工作笔记(二)
- CSS基础知识(二)
- vijos 小白逛公园(线段树单点更新)
- android 系统数据业务---模式
- Hibernate成功建表后表内无数据的问题
- HTML-表格
- DES加解密原理及实现
- BZOJ2038 [2009国家集训队][小Z的袜子(hose)]
- 为什么要将线程设置成分离状态
- 浅谈开源大数据平台的演变,理清各平台的历史关系和出现背景