今天学习的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. http中的socket是怎么一回事

    首先我们先看一下socket的定义:是在传输层和应用层中间的一个抽象层,是实现网络通信的接口. 那么什么是传输层,什么是应用层呢?网络又是怎样通信的呢?为了弄清这两个问题,我们需要弄清一个概念TCP/ ...

  2. H5样式（个人使用）

    @*定义全局样式*@ <style> body, ul, li, p, h1, h2, h3, h4, h5, h6, hr, span, form, fieldset, table, t ...

  3. HDFS（一） 高级特性

    三个高级特性——快照.配额.回收站 一.快照(snapshot):是一种备份,默认关闭 1.应用场景: 防止用户错误操作 备份 试验/测试 灾难恢复 2.命令: 管理命令: -allowsnapsho ...

  4. hadoop streaming字段排序介绍

    我们在使用hadoop streaming的时候默认streaming的map和reduce的separator不指定的话,map和reduce会根据它们默认的分隔符来进行排序 map.reduce: ...

  5. vue 及sass安装

    推荐:https://www.cnblogs.com/Mr--Li/p/7921150.html

  6. Java Script--------问题错误解决意外的终止输入Uncaught SyntaxError: Unexpected end of input解决办法

    错误信息: Uncaught SyntaxError: Unexpected end of input 错误原因: 一般是成对的符号只出现了单只,比如说“”,‘’,{},[]. 解决办法:检查符号是否 ...

  7. 纯css实现评分

    用到的知识点: E:checked:单选或复选框被选中 E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点 E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容 ...

  8. Linux服务器管理神器-IPython

    系统管理员的首选,一个很智能的交互式解释器. 一.特性: 1)magic函数:内置了很多函数用来实现各种特性. 2)Tab补全:可以有效地补齐Python语言的模块.方法和类等. 3)源码编辑:可以直 ...

  9. mysql 自定义方法 function

    在创建函数的时候,如果报如下错误 这个时候一定要先执行:set global log_bin_trust_function_creators=TRUE; 第二步骤: delimiter ;;CREAT ...

  10. python—函数

    # 函数:1.减少重复代码:# 2.使程序变的可扩展# 3.使程序变的易维护# 永远只能且返回一个值#def 定义内容# a,b = 5,8# c = a** b# print(c)## def ca ...