今天学习的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. Shell脚本 自动部署 SpringBoot 应用

    公司项目使用了SpringBoot.开发的应用需要自动上传到服务器.虽然目前对热部署还没完全掌握.先使用shell简化一下部署吧. # 上传密钥 sshLoginKey=/f/MyFile/root. ...

  2. 数据库更新记录时，记录不存在则创建的sql语句

    INSERT INTO 表名 (字段1(主键),字段2,字段3) values (#{value1},#{value2},#{value3}) ON DUPLICATE KEY UPDATE 字段2= ...

  3. python 全栈开发笔记 1

    将自己的姓名用进制表示出来 #自己姓名的进制表示 name=input('请输入你的名字:') for i in name: print(i) # python 3 中是按字符进行循环的 bytes_ ...

  4. 1. nginx添加自定义http模块(简单)

    步骤 1. 新建模块目录2. 添加模块配置文件3. 编写模块源码文件4. 在主配置文件中配置访问location5. 编译加入模块文件6. 测试 新建模块目录 mkdir /opt/nginx/ext ...

  5. 分布式session个人理解浅谈

    在分布式中,用户的session如何处理呢? 服务器中的原生session是无法满足需求的,因为用户的请求有可能随机落入到不同的服务器中,这样的结果将会导致用户的session丢失,传统做法中有解决方 ...

  6. 安装mavlink遇到的问题（future找不到）

    从官网下载mavlink(git clone https://github.com/mavlink/mavlink.git) 然后进入mavlink 目录执行 git submodule update ...

  7. java.lang.NoSuchMethodError: org.springframework.util.StreamUtils.emptyInput()Ljava/io/InputStream;

    今天写用spring的MockMvc测试controller的demo时出现了这个错误,条件反射的进行了百度,没有搜到匹配的答案,但给了一些解决问题的思路:首先NoSuchMethodError要不就 ...

  8. bom与dom的区别

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年代后期微 ...

  9. visual c++如何显示行号

    工具 -> 选项 -> 文本编辑器

  10. Python03（Linux和Python简介）

    Trainning-day02回顾1.rmdir : 删除空文件夹2.rm :删除文件或者文件夹 -r 删除目录以及其内容 -i 删除前的提示 -f 强制删除3.通配符 * 匹配任意多个任意字符 ?匹 ...