精华内容
下载资源
问答
  • html标签有三大性质,如果不清楚这些东西,使用css添花时候可能会糊涂不知所措。一、块级元素块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局必须部分,使网页结构更加紧凑...

    html标签有三大性质,如果不清楚这些东西,在使用css添花的时候可能会糊涂的不知所措。

    一、块级元素

    块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。

    • 典型代表:div,h1-h6,p,ul,li
    • 特点

    1.独占一行,普通流中不予许有和它同占一行的

    2.可以设置其宽度、高度,内外边距

    3.嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致

    4.可以容纳其他元素,p元素是例外

    二、行内元素

    • 典型代表: span ,a, ,strong , em, del, ins
    • 特点

    1.在一行上显示,如果不是块级元素,所有的元素都会并排一起

    2.设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。

    3.元素的宽和高就是内容撑开的宽高,自身无法设置。

    4.只能容纳其他行内元素或者文本,a元素是例外,但是放了块级元素就不能放链接了。

    三、行内块元素(内联元素)

    • 典型代表 input img
    • 特点

    1.和相邻行内元素在同一行,但是之间会有空白缝隙。

    2.默认宽度是他本身内容的宽度,但是也可以手动设置

    三、转换属性的方法

    • 块元素转行内元素:display:inline;
    • 行内元素转块元素:display:block;
    • 块和行内元素转行内块元素:display:inline-block;

    四、行高

    • 浏览器默认文字大小:16px
    • 行高:是基线与基线之间的距离,行高=文字高度+上下边距
    • 一行文字行高和父元素高度一致的时候,垂直居中显示
    206eee2a813acf5a399912665230db80.png

    实例:开发网页时,你会发现,图片和底部对不齐,他们之间会有间隙,那么为什么会有这个间隙呢?

    原因:这是因为img元素后面会跟一个空白符,会使它的高度多出3px。至于这个空白符出现的原因嘛,是因为img元素是行内元素,行内元素默认会有3px的间距。因此当我们的块级元素div包含这个行内元素的时候底部就出现了3px的间距。

    解决方法:将img转换为块级元素就好了,{display:block}


    如果喜欢点击加关注,有什么问题或者建议可以在下方评论留言哦~~

    展开全文
  • DIV+CSS基础总结

    2017-07-29 23:16:00
    一、无意义标签 1.DIV 块级元素,会自动换行(独占一行) 2.Span 行内元素,内容显示一行 ...宽度默认为父元素body的宽度 高度被内容撑起了 块状元素设置文本属性没用(元素之间没用空隙) ...

    一、无意义标签

    1.DIV

    • 块级元素,会自动换行(独占一行)

    2.Span

    • 行内元素,内容显示在一行内

    二、块级元素和行内元素

    1.块级元素特点

    • 总是在新行上开始,占据一整行
    • 高度,行高以及外边距和内边距都可控制
    • 宽度缺省是它的容器的100%,除非设定一个宽度
    • 它可以容纳内联元素和其他块元素
    • 宽度默认为父元素body的宽度
    • 高度被内容撑起了
    • 块状元素设置文本属性没用(元素之间没用空隙)

    2.行内元素特点

    • 和其他元素都在一行上;
    • 高,行高及外距和内边距部分可改变;
    • 宽度只与内容有关
    • 行内元素只能容纳文本或者其他行内元素
    • 外边界(margin)只对左右起作用,内边距(padding)都起作用
    • 行内元素(会被当成文字看待,元素之间有空隙)

    3.行内元素和块级元素的比较

    • 块状元素独占一行, 行内元素可以共用一行
    • 默认宽度: 块状元素默认宽度由父元素决定 行内元素默认宽度右内容决定
    • 块状元素可以设置宽高, 行内元素不可以设置宽高
    • 大部分块状元素内部可以嵌套块状或行内, 大部分行内只能嵌套行内
    • 外边距,块状没问题,行内只能设置左右

    三、盒子模型

    1. 每个盒子都有四个属性:

    • 边界(margin)
    • 边框(border)
    • 填充(padding)
    • 内容

    四、盒子之间的关系

    1.Document树

    • 父元素
    • 子元素
    • 后代元素
    • 祖先元素
    • 兄弟元素(具有相同父元素)

    2.标准文档流

    • 行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域,它同样是DOM树中的一个节点,在这一点上行内元素和块级元素没有区别。
    • 块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。

    3.盒子在标准流中的定位原则

    • 行内元素之间的水平margin(为左右margin之和)
    • 块级元素之间的竖直margin(合并margin会塌陷)
    • 嵌套盒子之间的margin(子元素父元素margin合并)
      • 元素嵌套的时候,设置元素的上margin会被父元素抢走
      • 解决方案:设置overflow:hidden;border:1px solid #ccc;
    • 将margin设置为负值

    五、相关CSS属性

    1.布局属性

    • display
      • 块状元素与行内元素的转换
        • block
        • inline:块状转换为行内
        • inline-block:会产生一个介于行内和块状元素之间
          • 除了不会独占一行,其他和块状一样,可以设置宽高了(本质上是行内)
          • img,表格,表单等元素
        • none:隐藏元素(看不见,而且不占空间)
    • visibility
      • 可见属性:主要隐藏表格的一行或一列
        • hidden:隐藏(看不见,但是还占空间)
        • visible:可见(默认)
        • inherit:继承上一个对象可见性
        • collspase:
    • overflow
      • 超出范围(值如下:)
        • auto:自动设置(不溢出没有滚动条,溢出有滚动条)
        • scroll:总显示滚动条
        • visible:不剪切内容,溢出内容也显示,也不添加滚动条,
        • hidden:不显示超出对象尺寸的内容
    • overflow-x
    • overflow-y

    • float
      • 浮动属性(将文字设置在元素的周围)
        • left
        • right
        • none
    • clear
      • 清除属性(是否允许有其他元素漂浮在周围,清除浮动对后面元素的影响)
        • none:允许两边都可以有浮动
        • left:
        • right
        • both:完全不允许有浮动

    2.尺寸属性

    • height
    • min-height:最小高度,如果文字比较多会自带撑开而不会溢出(经常使用)
    • max-height:最大高度(显示默认值)
    • width
    • min-width:显示父元素的宽度(默认值)
    • max-width:最大宽度
    • border

    3.内补白

    • padding(内边距)会影响整个盒子的大小
    • padding-left
    • padding-right
    • padding-top
    • padding-bottom

        padding:上下左右;
        padding:上下 左右;
        padding:上 左右 下;
        padding:上 右 下 左;

    4.外补白

    • margin(边距/外边界)
    • margin-left
    • margin-right
    • margin-top
    • margin-bottom
    • p,ul等自带margin,可以自己设置为margin:0px;(0时可以不加单位)

    5.定位属性

    • position
      • absolute:绝对定位,脱离文档流,下面的跟上来了
        • 元素一旦设置了绝对定位,都变成块状元素
        • 如果父元素没有定位,就相对于html(屏幕)定位
        • 只要父元素定位了,就会以父元素为参照定位
      • relative:相对定位,相对于自己(对象不可层叠)
        • 一个元素一旦设置了相对定位,都变成块状元素
      • fixed:固定在指定位置(相对于浏览器窗口进行定位)
        • 永远参照html进行定位
      • static:默认值,不定位,在文档流里面
      • 文档的位置通过left/top/right/bottom属性进行规定
    • top
    • left
    • right
    • bottom
    • z-index
      • 只能设置给已经定位的元素
      • 可以将元素显示在上面,数值越大越在上面
      • 设置显示层级(层叠顺序)
        • auto(表示遵循其父对象的定位属性)
        • number(没有单位的整数)可以为负值

    6.属性的继承问题

    • 文本类,字体,颜色(跟文字有关)的会被继承
    • 背景颜色(默认值是透明),布局相关的不会被继承

    转载于:https://www.cnblogs.com/1666818961-lxj/p/7257901.html

    展开全文
  • 默认宽度是父标签的宽度,默认高度是内容的高度设置宽高有效。 h1~h6、p、div、列表相关… b.行内标签:一行可以显示多个;默认大小是内容的大小;设置宽度无效。 a、span、label、font… c.行内块标签:一行可以...

    1.标准流布局

    标签在没有布局相关的属性的时候,默认的布局方式就是标准流布局。
    a.块级标签:一个占一行;默认宽度是父标签的宽度,默认高度是内容的高度;设置宽高有效。
    h1~h6、p、div、列表相关…
    b.行内标签:一行可以显示多个;默认大小是内容的大小;设置宽度无效。
    a、span、label、font…
    c.行内块标签:一行可以显示多个;默认大小是内容的大小;设置宽高有效。
    img、输入框

    2.display属性(css)
    block: 将标签修改成块级标签
    inline: 将标签修改成行内标签
    inline-block: 将标签修改成行内块
    none:隐藏标签
    –>

    1.块级标签

    我是标题1

    我是标题2

    我是段落1

    我是段落2

    我是div1
    我是div2
        <h1>2.行内标签</h1>
        <a href="" style="background-color: aquamarine; width: 300px; height: 100px;">我是超链接1</a>
        <a href="" style="background-color: sandybrown;">超链接2</a>
        <label style="background-color: skyblue; height: 60px;">我是lable1</label>
        <label>我是lable1</label>
        
        <h1>3.行内块标签</h1>
        <img style="background-color: sandybrown; width: 400px;" src="img/anchor.png" >
        <img src="img/ghost.png" >
        <input type="text" name="" id="" value="" />
        <input style="height: 60px;" type="text" name="" id="" value="" />
        
        <h1>display属性</h1>
        <div style="background-color: sandybrown; width: 200px; display: inline;">
            div3
        </div>
        <div style="background-color: skyblue; height: 100px; display: inline;">
            div4
        </div>
        
        <a style="width: 100px; height: 100px; background-color: deeppink; display: inline-block;">超链接3</a>
        <a style="background-color: salmon; display: block;">超链接4</a>
        <img style="display: none;" src="img/hat.png" >
    

    标准流网页布局

    <head>
    	<meta charset="utf-8">
    	<title></title>
    </head>
    <body>
        <div style="height: 120px; background-color: sandybrown;"></div>
        <div style="width: 40%; height: 600px; background-color: skyblue; display: inline-block;"></div>
        <div style="width: 59%; height: 600px; background-color: pink; display: inline-block;"></div>
    </body>
    
    展开全文
  • 对于浮动看法

    2019-05-14 20:17:42
    浮动可以使块元素排成一行,包括左浮动和右浮动,当浮动元素框碰到了父元素边框或者是另一个浮动框边框时停止,浮动让行元素支持设置宽度和高度,浮动也可以实现文字包围图片效果,当父元素不设置高度...

    浮动可以使块元素排成一行,包括左浮动和右浮动,当浮动元素的框碰到了父元素的边框或者是另一个浮动框的边框时停止,浮动让行内元素支持设置宽度和高度,浮动也可以实现文字包围图片的效果,当父元素不设置高度的时候,浮动会脱离父元素,对父元素的兄弟元素会产生影响,因此需要清除浮动产生的影响,清除浮动的常用方法包括三种,一种是在父元素中设置overflow:hidden;还有一种就是添加额外的标签,比如在父元素内添加一个<div style="clear:both;>,还有一种就是在外部的css文件中添加.father:after{content:’’;display:block;clear:both;}

    展开全文
  • 基本任务 ...width(宽度height(高度)是描述单个div两个基本属性,使用时需要style标签(或内部标签,外部文件)中进行描述。每个div都可设置其初始值,之后当往内部填充了其它模块之后
  • 浏览器如果支持 img 标签的 <code>srcset</code> 将会根据 viewport 的宽度选取适当的图片来加载。 封装代码 <h3>JS 代码封装为 原生js Vue.js 两种 原生js为一个 <code>Class</code> ,实例化后直接使用&#...
  • <code>1vw</code> 和 <code>1vh</code> 分别是视口宽度和高度的 1%。桌面端,视口指就是浏览器可视区域: <pre><code>js 1vw = window.innerWidth / 100 1vh = window.innerHeight / 100 ...
  • html标签有三大性质,如果不清楚这些东西,使用css添花时候可能会糊涂不知所措。一、块级元素块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局必须部分,使网页结构更加紧凑...
  • HTML基础

    2018-12-17 11:52:38
    HTML标签使用尖括号包围关键词 HTML的标签通常成对出现...元素的高度宽度、行高以及顶底边距都可设置 元素宽度在设置的情况下,是它本身父容器100%,除非设定一个宽度 布局代码 List item 内联样式 ...
  • python学习HTML之CSS(2)

    2018-08-20 08:24:00
    PS:边框的高度和宽度可以采用百分比,但是高度方向百分比基本无用,因为基数没定,参考没意义!! 2、边距外边距 3、右下角添加一个“回顶部”的标签。 <div></div>中的标签的位置有两个...
  • 保密期内的保密论文和在技术保护期限内的论文外,允许论文被查阅借阅,可以公布(包括以电子信息形式刊登)论文全部内容或中、英文摘要等部分内容。论文公布(包括以电子信息形式刊登)授权东南大学研究生...
  • 兼容问题

    2019-10-04 00:30:22
    1. 低版本IE,低版本火狐下,获取不到button标签内的其他元素。 解决方法: 1.将button换成div标签;...不要去用padding去撑select的宽度和高度,直接设置width/height即可。 3. 主流浏览器(兼容...
  • 前端css+html+布局笔记

    2017-09-14 20:03:59
    可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时,页面将会相应的内联框架中打开 内联框架中的内容不会被搜索...
  • 一. 块级元素,行内元素,行内块级元素 块级元素:display:block,对于 div,p,h1 等标签,每个元素...元素的宽度和高度无法设置。垂直方向的内外边距和边框无法调整。需要调整垂直尺寸时,可以用 line-height 行高。
  • 3.宽度 高度 外边距 边距都可以灵活设置 4.是一个容器盒子,里面可以放块元素或者行内元素 注意: 只有文字才能组成段落P 因此P里面不能放块级元素 特别P不能放 div. 同理还有h1 h2 h3 h4 h5 h6 dt 他们都是...
  • CSS样式学习(二)

    2019-09-16 10:27:06
    宽度默认是父级标签容器的宽度。 可以设置高度宽度以及内外边距。 可以嵌套其他块级元素或行内元素。 2)行内元素 常见的行内元素有span,a,strong,em,del,ins 特点: 可以其他行内元素同一行。 行内元素不能.....
  • template/user/ 为系统会员中心模版及相关cssjs ****************************模板规范化管理 结束**************************** ****************************系统内置JS、CSS说明 开始*******************...
  •  3.4.2 设置水平线的宽度高度  ——width、height 57  3.4.3 设置水平线的颜色——color 58  3.4.4 设置水平线的对齐方式——align 59  3.4.5 去掉水平线阴影——noshade 60  3.5 其他文字标记 60  3.5.1 ...
  • jQuery详细教程

    2013-04-25 14:16:42
    $("div#intro .head") id="intro" <div> 元素中所有 class="head" 元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中核心函数。 事件处理程序指是当 HTML 中发生某些事件时所调用方法。术语...
  • html入门到放弃笔记

    2018-05-15 15:06:12
    2、width :图像的宽度 3、height :图像的高度 4、title :鼠标悬停时,要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示自己的网页中 3、超链接 1、语法 标记:内容 属性: 1、href : 要...
  • javascript函数解释

    2011-02-26 11:03:52
    52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number, Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError 53.JS中换行:\n 54.窗口全屏大小:<script>...
  • -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的皮肤Gray。 -为示例工程添加改变语言皮肤的下拉列表。 -为PageContext增加静态函数Refresh,切换语言皮肤时使用。 +2009-12-01 v2.1.7...
  • HTML开发王

    2013-01-03 11:33:09
    9.4.4 单元格的宽度和高度 9.5 表格的按行分组显示(thead元素、tfoot元素、tbody元素) 9.6 表格的按列分组显示(colgroup元素、col元素) 9.6.1 创建列分组(colgroup元素) 9.6.2 使用span属性指定列分组 9.6.3 为列...
  • [HTML开发王].张亚飞.扫描版

    热门讨论 2011-09-13 12:45:04
    9.4.4 单元格的宽度和高度 9.5 表格的按行分组显示(thead元素、tfoot元素、tbody元素) 9.6 表格的按列分组显示(colgroup元素、col元素) 9.6.1 创建列分组(colgroup元素) 9.6.2 使用span属性指定列分组 9.6.3 为列...
  • 标签名只能写前面并且只能有一个标签 (5)伪类选择器(只用于链接 用:表示) a:link 未访问过链接 a:visitied 已访问过链接 a:hover 选择鼠标经过链接/悬停时链接 a:active 选择是鼠标正在按下...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的皮肤Gray。 -为示例工程添加改变语言皮肤的下拉列表。 -为PageContext增加静态函数Refresh,切换语言皮肤时使用。 +2009-12-01 v2.1.7...
  • rss_width (integer or string) – 代码块RSS输出时的宽度,可在设置界面更改。 theme (string) – 代码块颜色风格 (default, blackboard, dawn, mac-classic, twitlight, vibrant),可在设置界面更改。 inline ...
  • // 设置 canvas 的宽度和高度 canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var base64 = canvas.toDataURL('image/png'); var base65 = canvas.toDataURL('image/png'...
  • 第一张和第二张图分别是浏览器计算出的容器的宽度和高度,可以明显发现test1 的宽度多了<code>2像素 <img alt="" src="https://ws3.sinaimg.cn/large/006tNc79ly1g30p3t27afj329e0940ta.jpg" /></p> 同样的...
  • 实例193 div标签设计论坛帖子浏览页面 234 实例194 标签设计论坛后台管理页面 236 实例195 标签设计页面布局 237 实例196 页面布局(2列左窄右宽高度自适应) 240 实例197 页面布局(2列固定宽度+头部+导航+尾部) 242 ...

空空如也

空空如也

1 2
收藏数 35
精华内容 14
关键字:

在div标签内设置div的宽度和高度