今天学习的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. [转] How Bill Gates read books

    Bill Gates is one of the most famous figures in the business world. He is one of the richest men in ...

  2. http/1.0/1.1/2.0与https的比较

    HTTP是HyperText Transfer Protocol的缩写,译为超文本传输协议.是一种应用于OSI七层模型中应用层的协议,是我们平常互联网网络通信传输的基础.它的作用就是规定了服务器和客户 ...

  3. C语言采用socket实现http post方式上传json数据

    1.按照HTTP协议发送请求: http POST 报文格式 http 报文是面向文本的. 报文分为:请求报文和响应报文 请求报文由:请求行,请求头部,空行和请求数据四个部分组成. <1.请求行 ...

  4. 003dayPython学习初始模块和字节码

    一.注释: 1.单行注释 # 被注释的内容 2.多行注释 """ 被注释的内容 """ 二.模块 我们在编程的时候,往往是一个主.py文件, ...

  5. MFC中创建自定义消息

    消息映射.循环机制是Windows程序运行的基本方式.VC++ MFC 中有许多现成的消息句柄,可当我们需要完成其它的任务,需要自定义消息,就遇到了一些困难.在MFC ClassWizard中不允许添 ...

  6. Oracle查询和过滤重复数据

    对数据库某些意外情况,引起的重复数据,如何处理呢? ----------------查重复: select * from satisfaction_survey s and s.project_no ...

  7. linux发布环境初始化脚本

    #参数配置 homeDir=$(pwd) tomcatDir=$homeDir/tomcat logDir=$homeDir/tomcat/logs backUpDir=$homeDir/backup ...

  8. codeforces 1140D(区间dp/思维题)

    D. Minimum Triangulation time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  9. 2016/12/20 dplの课练

    1.个人博客的文件,只输出学生姓名 cat 111 |sed 's/[0-9a-zA-Z:/. -]//g' 2.只输出每个学生的url cat 111 |sed 's/.*:\/\///g' 3. ...

  10. webservice和dubbo区别

    webservice  不需要搭建注册中心,是一个服务框架,主要内容有soap协议,uuid注册中心,wsdl文件. dubbo   需要搭建注册中心,可以是zookeeper,redis.它是一个分 ...