css列表属性与display属性

list-style:none

内联标签不能设宽高

display:"inline-block" 有内联标签不独占一行的属性和块级标签可设宽高的属性

display:none 不显示,位置也没了  display是显示、展示的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ol,ul{
            list-style: none;
        }
    </style>
</head>
<body>

<ol>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ol>

<ul>
    <li>111</li>
    <li>122</li>
    <li>134</li>
</ul>

<dl>
    <dt>河北省</dt>
    <dd>廊坊</dd>
    <dd>保定</dd>
    <dd>石家庄</dd>
</dl>
</body>
</html>

列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2,p,a,span{
             width: 100px;
             height: 100px;
        }

         .div2{
             background-color: yellow;
             /*display: inline;*/
             display: none;
         }

        p{
             background-color: red;
            /*display: inline;*/
         }

        span{
             background-color: palevioletred;
             display: inline-block;
         }
        a{
             background-color: green;
             display: inline-block;
         }
        .outer{
            word-spacing: -8px;
        }
    </style>
</head>
<body>

<div class="div2">divvvvv</div>
<p>pppppp</p>

<div class="outer">
    <span>spannnnnn</span>
    <a href="#">click</a>
</div>

</body>
</html>

display属性

原文地址:https://www.cnblogs.com/jintian/p/11048716.html

时间: 2024-10-09 23:49:46

css列表属性与display属性的相关文章

css中如何使用border属性与display属性

原文:css中如何使用border属性与display属性 border属性介绍# border属性设置元素边框. 边框3个要素如:粗细.线型.颜色. 边框线型属性值说明表如:# 属性指 描述 none 定义无边框. hidden 与 "none" 相同.不过应用于表时除外,对于表,hidden 用于解决边框冲突. dotted 定义点状边框.在大多数浏览器中呈现为实线. dashed 定义虚线.在大多数浏览器中呈现为实线. solid 定义实线. double 定义双线.双线的宽度等

前端之CSS列表及背景类属性

一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2.使用图片作为列表符号: list-style-image:url(图片路径); 3.列表符号位置: list-style-position:outside(默认值,在外边)|inside(在里边); 4.去掉列表符号样式: list-style:none; 常用写法:  ol,ul{list-sty

CSS基础学习十四:盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

CSS属性之display

display属性用来设置或检索对象是否及如何显示 默认值:对于HTML文档来说,这取决于你使用的标签 继承性:不继承 支持动画:否 display是一个很重要的CSS属性,设定的值会对一个HTML元素的内部和外部表现造成影响 值列表: none:不显示该元素 给display设置none,浏览器就不会渲染该元素,虽然元素存在DOM中,可以通过JS访问,但是从视觉上,是完全消失. block:块级元素 最常用的值了,设置block会让元素变得如DIV那样,独占一行 inline:内联元素 <sp

css笔记-display属性

css笔记-display属性 display属性可取值 display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | co

(转)CSS的display属性

原文链接:http://www.cnblogs.com/xieon1986/articles/1424022.html display属性中:block:块状显示,在元素后面添加换行符,也就是说其他元素不能在其后面并列显示.inline:内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示. 重点:display属性的浏览器兼容表及用法详解 该CSS属性用来设定对象如何显示. 值:block | none | inline | inline-block | list-item | tab

如何理解CSS的display属性

在布局中, display 属性是最重要的CSS属性之一.其最常见的属性值有 block , inline , none , table 以及 inline-block .最近的新宠为 flex ,因为它是专门为布局创建的 display 属性.新出现的 grid (最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用. 这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章. 表内容 通过创建各种响应式设计,对于 display 以及 positio

web前端入门到实战:CSS Display属性的双值写法

display属性 display 属性用来控制一个元素及其子元素的 格式化上下文, 你应该在刚刚学习CSS的时候就知道,有些元素是块级元素,有些则是行内元素. 有了 display 属性,你就可以切换元素不同的状态.比如说,通常一个 h1 元素是一个块级元素,但是通过切换,它就能以内联元素展现. 这几年,我们也知道了Grid 布局和弹性盒布局.我们只需要将 display 属性的值设置为 display: grid 或 display: flex 就可以实现这两种布局.当 display 属性

css display属性详解

css 中display属性决定了一个元素的显示方式,它分别有下面几种显示方式 block 块级显示,可以设置高宽.前后存在换行符 inline-block 行内块级元素显示,可以设置高宽.前后没有换行符 inline 行内元素显示,前后没有换行符,不可以设置高宽,元素高宽由内部元素决定 list-item 列表块级元素显示,前后都有换行符,但和block不同的是,它可以和li一样在元素前面加上标记 table 表格块级元素显示,类似于table元素,前后都有换行符 常用的元素显示方式 行内元素