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构造块级元素的更多相关文章

  1. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  2. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  3. css中块级元素、内联元素（行内元素、内嵌元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  4. CSS的块级元素和内联元素，以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  5. css的块级元素和行级元素

    块级元素 概念: 每个块级元素都是独自占一行.  元素的高度.宽度.行高和边距都是可以设置的.   元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%) <address>/ ...

  6. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  7. 深入认识CSS的块级元素

    2019独角兽企业重金招聘Python工程师标准>>> 块级元素: 显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行.每个块级元素默认占一行高度,一行内添加一个块级元素后 ...

  8. css实现块级元素水平垂直居中的方法？

    父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...

  9. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

随机推荐

  1. MVC中的_viewstart.cshtml（没有设置Layout却引用了布局）

    今天Home视图中新增了一个视图,因为不需要设置Layout就没与管他,但是运行起来一看,自动引用了布局,分析了半天 也没看出是哪的错误? 后来尝试着在area中增加了一个同样的视图就没有问题,比较这 ...

  2. 第19章 使用PXE+Kickstart部署无人值守安装

    章节概述: 本章节将教会您通过PXE+DHCP+TFTP+VSftpd+Kickstart服务程序搭建出无人值守安装系统,从而批量部署客户机系统. 这种系统能够实现自动化运维.避免了重复性劳动,帮助提 ...

  3. L18 如何快速查找文档获得帮助

    原地址:http://www.howzhi.com/course/286/lesson/2121 查找文档快速 苹果提供了丰富的文档,以帮助您成功构建和部署你的应用程序,包括示例代码,常见问题解答,技 ...

  4. 2015安徽省赛 B.求和

    题目描述 对于正整数n,k,我们定义这样一个函数f,它满足如下规律 现在给出n和k,你的任务就是要计算f(n,k)的值. 输入 首先是一个整数T,表示有T组数据 接下来每组数据是n和k(1<=n ...

  5. hrb 2134 素数

    分拆素数和 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 176(99 users) Total Accepted: 106(93 u ...

  6. linux增加自定义path和manpath

    linux安装软件到自定义路径时,新安装的命令需要带上路径才可以执行,不能像系统自带命令那样可以直接使用. 这个时候可以通过修改环境变量PATH和MANPATH,来实现像系统命令一样使用新安装的命令并 ...

  7. Redis使用介绍

    Redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类keyvalue存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供了Pyth ...

  8. 惊魂web应用宕机记一次网站的紧急恢复

    这次网站的故障出现的比较突然,没有任何防备,有种突如其来的感觉.这是一台阿里云服务器,采用wdcp的nginx+apache+mysql的方式运行.一位同事在对web目录进行压缩后,由于web目录有很 ...

  9. kettle转换JavaScript获取命令行参数

    日常开发中由于很多参数是变化的,需要在部署时才能确定.而写在配置文件里又显得很笨重,因而可以运行时实时指定.那么kettle是怎么获取命令行中的参数的呢? kettle可以通过转换里的JavaScri ...

  10. js将map转换成数组

    /** * map转数组. * * @param {Map}map * map对象 * @return 数组 */ Share.map2Ary = function(map) { var list = ...