今天学习的div，了解了div是干什么用的掌握了什么是盒子模型，以及div的外边距内边距以及边框，运用div和CSS给文字排版，利用边框的来做图像，div溢出的处理

CSS初始化：　　　　精确排版的时候用这个清理一下
    *{
    margin:0px;
    padding:0px;
    }
    
    */

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>div介绍</title>

 <!--

 <div></div>不是功能标签

 是可以放文字、图片以及各种元素块标签，相当于是个方便袋，常用于来布局

 div不设置宽高不显示-->

 <style>

     #d1{

         background-color: red;

         width: 50px;

         height: 50px;

         float: left;

     }

     #d2{

         background-color: blue;

         height: 100px;

         width: 100px;

 /*        浮动*/

         float: right;

     }

     #d3{

         background-color:#666666;

         height: 100px;

 /*清除浮动，不让浮动的盖住*/

             clear: both;

     }

     </style>

 </head>

 <body>

   <div id="d1">我是左div</div>

   <div id="d2">我是右div</div>

   <div id="d3">我是三div</div>

 </body>

 </html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>溢出处理</title>

<style>

    #d{

        background-color: yellow;

        width: 100px;

        height: 100px;

/*如果内容超出div则隐藏*/

/*        overflow: hidden;*/

/*不管内容是否超出，都会给div加一个滚动条*/

/*        overflow: scroll;*/

/*如果内容不超出div则没有滚动条，如果超出；自动添加滚动条    */

        overflow: auto;

    }

    </style>

</head>

<body>

<div id="d">

    刘奶奶找牛奶奶买牛奶，牛奶奶给刘奶奶拿牛奶

</div>

</body>

</html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>快速添加边框的粗细、类型、颜色</title>

<style>

    #d{

/*快速添加边框的粗细、类型、颜色*/

        border-left: 100px solid white;

        border-right: 100px solid  white;

        border-bottom: 100px solid    #FC01FB;

        width: 00px;

        height: 00px;

        background-color: yellow;

    }

    #d1{

        border-left: 100px solid white;

        border-right: 100px solid  white;

        border-bottom: 100px solid    #06B5D1;

        width: 00px;

        height: 00px;

        background-color: yellow;

    }

    #d2{

        width: 85px;

        height: 100px;

        background-color: white;

        float: left;

    }

    #d3{

        width: 30px;

        height: 100px;

        background-color: yellow;

        float: left;

    }

    #d4{

        width: 85px;

        height: 100px;

        background-color: white;

        float: left;

    }

    </style>

</head>

<body>

<div id="d"></div>

<div id="d1"></div>

<div id="d2"></div>

<div id="d3"></div>

<div id="d4"></div>

</body>

</html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>网页文字用DIV排版</title>

<style>

    li{

        list-style-type: none;

        float: left;

/*    间距*/

        margin: 20px;

    }

    </style>

</head>

<body>

<ul>

    <li> 首页</li>

    <li>新闻网</li>

    <li>首页概况</li>

</ul>

</body>

</html>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>盒子模型边框属性 CSS初始化</title>

<style>

/*盒子模型：

    外边距；margin      margin:auto   auto的意思是自适应

    边框；barder

    内边框；padding

    margin重叠现象：只要有一个元素没有float属性就会出现重叠现象，margin取相邻元素的margin最大值

CSS初始化：

    *{

    margin:0px;

    padding:0px;

    }

    */

*{

    margin:0px;

    padding:0px;

    }

    #big{

        width: 500px;

        height: 500px;

        background-color: yellow;

    }

    #small1{

        width: 100px;

        height: 100px;

        background-color: red;

        float: left;

        margin: 10px 10px 10px;              /*上右下左*/

        border: 20px solid black;

        padding: 10px;                        /*上右下左和margin一样*/

    }

    #small2{

        width: 100px;

        height: 100px;

        background-color: blue;

        float: left;

        margin: 10px;

    }

    #small3{

        width: 100px;

        height: 100px;

        background-color: aqua;

        clear: both;

        margin: 10px;

    }

    #small4{

        width: 100px;

        height: 100px;

        background-color: orange;

        clear: both;

        margin: 10px;

    }

    </style>

</head>

<body>

    <div id="big">

        <div id="small1">戒指</div>

        <div id="small2"></div>

        <div id="small3"></div>

        <div id="small4"></div>

    </div>

</body>

</html>

div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出的更多相关文章

  1. css进阶----盒子模型，Reset CSS，css浮动，css定位，z-index属性

    盒子模型 把页面上的每一个元素当成一个盒子 由内容,内边距,边框,外边距组成 盒子模型举例 <!DOCTYPE html> <html lang="en"> ...

  2. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

  3. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  4. W3c盒子模型+IE盒子模型+box-sizing属性

    1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...

  5. DOM盒子模型常用属性client，offset和scroll

    JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...

  6. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  7. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  8. css属性 盒子模型

    一.    css属性相关 1.宽和高    1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...

  9. css 盒子模型 以及 box-sizing属性

    在标准的盒子模型下,css中 width,padding以及border的关系 关于css中的width和padding以及border的关系. 在css中,width和height指的是内容区域的宽 ...

随机推荐

  1. PHP运算符知识

    1.三目运算符: $a =1; echo $a>0 ? '大于0':$a==0 ? '等于0':'小于0'; 貌似应该输出:大于0 其实: 然而,上面语句的实际输出是't',因为三元运算符是从左 ...

  2. JAVA常用异常类

    算数异常类:   ArithmeticExecption 空指针异常类:    NullPointerException 指定类不存在:    ClassNotFoundException 字符串转换 ...

  3. [转]MYSQL 创建存储过程

    MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...

  4. font-family 中文字体列表

    华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro:LiHei Pro ...

  5. winform程序中chart图的使用经验（chart图的更新）

    如何让chart图进行刷新并且根据数值重新绘制 首先初始化一个chart chart1.Titles.Add("柱状图数据分析"); chart1.ChartAreas[].Axi ...

  6. oracle 同义词synonym

    在A用户下,想访问B用户下的表,一遍需要用 “用户名.表名 ”的格式进行访问.如果想不加用户名,直接访问,需要建同义词. 同义词语法如下: CREATE [PUBLIC] SYNONYM synony ...

  7. [Paper][Link note]

    http://ieeexplore.ieee.org/document/6974670/

  8. Mysql基础教程之mysql 设置参数常用方法

    1)设置mysql的全局方法,设置完立刻重启mysqlvim /etc/my.cnf[mysqld]interactive_timeout=1800wait_timeout=1800 全局永久生效现在 ...

  9. Session 与 Token 的区别

    1. 为什么要有session的出现?答:是由于网络中http协议造成的,因为http本身是无状态协议,这样,无法确定你的本次请求和上次请求是不是你发送的.如果要进行类似论坛登陆相关的操作,就实现不了 ...

  10. CentOS系统Nginx安装配置，随时更新

    ./configure --prefix=/etc/nginx \ #指定安装目录 --sbin-path=/usr/sbin/nginx \ #指定执行路径--conf-path=/etc/ngin ...