css构造块级元素
css
1. 宽高
width:数值;
height:数值;
也可用百分比！
长高的设置不会被后代继承
2. 背景
(1)背景颜色
background-color:颜色值;
元素的背景颜色默认为transparent
background-color 不会被后代继承。
(2)背景图片
使用background-image 属性默认值为none 表示背景上没有放置任何图像
如果需要设置一个背景图像，必须为这个属性设置一个url 值
background-image: url(bg.gif);
注意图片的位置引入方法!
背景图片重复的问题
使用background-repeat 来解决，可以的值：repeat-x，repeat-y，no-repeat
背景图片的位置
使用background-position 来设置
1>可以使用一些关键字：top、bottom（下）、left、right 和center 通常，这些关键字
会成对出现。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
2>也可以用百分比
background:50% 50%;
第一个表示水平第二个表示垂直
3>当然更可以用数值，以px 单位
background:40px 10px;
第一个表示水平第二个表示垂直
4>也可以混用！
背景关联
background-attachment:fixed
(3)总结写法
background: #00FF00 url(bg.gif) no-repeat fixed center left;
3. 边框
border:1px solid #ccc;
dashed 表示虚线
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
分开设置
最后来讨论一个有趣的问题：
后代元素长度大于祖辈元素的大小时候的处理方法：
overflow:;
可能的值：
visible：默认，内容不会被修剪，会呈现在元素框之外。
hidden：超出的内容会被修剪掉，直接不现实。
scroll：超出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被超出，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承overflow 属性的值
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css构造块级元素</title>
<link rel="stylesheet" type="text/css" href="style/8.css" />
<style type="text/css"></style>
</head>
<body>
<div id="div1">我是div容器
<p>我是一个段落</p></div>
<div>我是div容器</div>
</body>
</html>
body {
background-image:url(../images/2.jpg);/*文件体背景*/
background-repeat:no-repeat;/*图片是否平铺*/
background-attachment:fixed;/*背景关联*/
}
#div1 {
width:900px;/*宽度*/
height:800px;/*高度*/
/* background-color:#00FFCC; */
background-image:url(../images/yu.jpg);
background-repeat:no-repeat;
background-position:center right;/*背景位置*/
}
#div1 p {
background-color:#B94FFF;/*p段落背景色*/
}
#div1 {
width:900px;/*宽度*/
height:600px;/*高度*/
/* background-color:#00FFCC; */
background-image:url(../images/yu.jpg);
background-repeat:no-repeat;
background-position:center right;/*背景位置*/
border:10px solid #00AAAA;
}
#div1 p {
background-color:#B94FFF;/*p的段落背景色*/
}
元素性质相互转化：
display:block;
display:inline;
display:inline-block;
display:none;
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css构造块级元素</title>
<style type="text/css">
#div1 {
width:200px;
height:200px;
background:#9999FF;
border:1px solid #000000;
overflow:auto;/*超出部分隐藏*/
}
#div2{
width:300px;
height:150px;
background:#FFCC22;
overflow:inherit;
}
a {
width:200px;
height:200px;
background:#9995FF;
border:1px solid #000000;
display:block;
}
#div3 {
width:200px;
height:200px;
background:#B94FFF;
border:1px solid #000000;
display:inline-block;
}
#div4 {
width:200px;
height:200px;
background:#FF8888;
border:1px solid #000000;
display:inline-block;
}
#div5 {
width:200px;
height:200px;
background:#99FFFF;
border:1px solid #000000;
display:inline-block;
} </style>
</head>
<body>
<div id="div1">
<div id="div2">
据了解，“双一流”建设囊括了具有约20年历史的“211工程”、“985工程”等项目。2015年底，国务院颁布了纲领性的《统筹推进世界一流大学和一流学科建设总体方案》。2016年全国教育工作会议上，时任教育部部长袁贵仁曾表示，“双一流”建设将是2016年乃至“十三五”规划的重点工程。</div>
</div>
<a href="http://www.baidu.com">百度</a>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
</body>
</html>
css构造块级元素的更多相关文章
- CSS 各类 块级元素 行级元素 水平 垂直 居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...
- CSS的块级元素和内联元素的概念
三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...
- css中块级元素、内联元素（行内元素、内嵌元素）
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- CSS的块级元素和内联元素，以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
- css的块级元素和行级元素
块级元素 概念: 每个块级元素都是独自占一行. 元素的高度.宽度.行高和边距都是可以设置的. 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%) <address>/ ...
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
- 深入认识CSS的块级元素
2019独角兽企业重金招聘Python工程师标准>>> 块级元素: 显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行.每个块级元素默认占一行高度,一行内添加一个块级元素后 ...
- css实现块级元素水平垂直居中的方法？
父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
随机推荐
- 在生产环境使用Docker部署应用
导读 Docker现在越来越流行,但是真正在生产环境部署Docker还是个比较新的概念,还没有一个标准的流程.作者是ROR的程序员,作者结合平时的部署经验,联系Docker的特点,向大家分享了其在生产 ...
- search in 2d matrix and serach minimum in rotated array
import java.io.*; import java.lang.reflect.Array; import java.util.Arrays; import java.util.Collecti ...
- svn安装【转载】
SVN简介 SVN全名Subversion,即版本控制系统.SVN与CVS一样,是一个跨平台的软件,支持大多数常见的操作系统.作为一个开源的版本控制系统,Subversion管理着随时间 ...
- Python Django 的 django templatedoesnotexist
django 1.8版本的解决方案 在 setting.py 这个文件里 TEMPLATES = [ ...... #原来的 #'DIRS': [ ], // 这个 列表里添加 template路 ...
- 2模02day1题解
源文件在我的网盘上.链接:http://pan.baidu.com/s/1qWPUDRm 密码:k52e (只有机智的人才能看到我的链接) 机智的双重下划线~~~ T1 T1就是一个递推,这题目把我恶 ...
- error adding symbols: DSO missing from command line collect2: error: ld returned 1 exit status
Windows服务器Azure云编译安装MariaDB教程 www.111cn.net 编辑:future 来源:转载 安装MariaDB数据库最多用于linux系统中了,下文给各位介绍在Window ...
- SQL常见笔试面试题
sql理论题 1．触发器的作用? 答:触发器是一中特殊的存储过程,主要是通过事件来触发而被执行的.它可以强化约束,来维护数据的完整性和一致性,可以跟踪数据库内的操作从而不允许未经许可的更新和变化.可以 ...
- Java用Scanner类获取用户输入
用Java编写程序时,有些数据需要用户输入,这个时候需要调用java提供的Scanner类,这个类在包java.util下,比如求一个矩形的面积,简单的看一下用法: import java.util. ...
- 2.python基础深入(元组、字符串、列表、字典)
一,对象与类 对象: python中一切皆为对象,所谓对象:我自己就是一个对象,我玩的电脑就是对象,玩的手机就是对象. 我们通过描述属性(特征)和行为来描述一个对象的. 在python中,一个对象的特 ...
- DP:Ant Counting(POJ 3046)
数蚂蚁 题目大意:一只牛想数蚂蚁,蚂蚁分成很多组,每个组里面有很多只蚂蚁,现在问你有多少种组合方式 (说白了就是问1,1,1,...,2...,3...,4...)这些东西有多少种排列组合方式 这一道 ...