今天学习的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的执行时间

    网上不少误导信息,实际上这个答案在PHP源码中的Zend文件夹下bench.php是有的 在此纠正下网络上复制粘贴造成的错误.希望后来人少踩点坑. function getmicrotime() { ...

  2. PC端车牌识别朱凯茵从事图像识别算法、OCR算法

    大家好,我是从事图像识别的pc端车牌识别朱凯茵,多多交流OCR算法,不限于车牌识别等,技术需要突破,你我成就梦想.

  3. 浅析Hashmap和Hashtable

    一.Hashmap不是线程安全的,而Hashtable是线程安全的 通过查看源码可以发现,hashmap类中的方法无synchronized关键字,而hashtable类中的方法有synchroniz ...

  4. MarkdownPan2 简单使用指南

    markdown 简单使用指南 一级标题 二级标题 三级标题加代码 四级标题 这里是加粗 这里是正文and English 888 这里有正文嵌入代码这种样式 这里是代码块 这种使用的代码块 还有引用 ...

  5. Java容器解析系列(7) ArrayDeque 详解

    ArrayDeque,从名字上就可以看出来,其是通过数组实现的双端队列,我们先来看其源码: /** 有自动扩容机制; 不是线程安全的; 不允许添加null; 作为栈使用时比java.util.Stac ...

  6. kubernetes二进制部署k8s-master集群controller-manager服务unhealthy问题

    一.问题现象 我们使用二进制部署k8s的高可用集群时,在部署多master时,kube-controller-manager服务提示Unhealthy [root@ceph-01 system]# k ...

  7. `TypeError: torch.mm received an invalid combination of arguments - got (torch.FloatTensor, Variable),

    `TypeError: torch.mm received an invalid combination of arguments - got (torch.FloatTensor, Variable ...

  8. 使用EFCore,手动创建SQLLite数据库

    有时候我们需要在代码中动态生成一个sqllite数据库文件,可以按照以下代码完成, static void Main(string[] args) { MyContext context = new ...

  9. [RESTful] RESTful是什么，为什么要使用它

    RESTful是什么? 本质:一种软件架构风格 核心:面向资源 解决的问题:降低开发的复杂性,提高系统的可伸缩性 设计概念和准则: 1.网络上所有的事物都可以被抽象为资源 2.每个资源都有唯一的资源标 ...

  10. Vue的计算属性，监视属性代码理解

    1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...