css列表缩进是什么意思outside和inside区别,在实际例子中看不出区别啊

html-css09

css列表缩进是什么意思outside和inside区别,在实际例子中看不出区别啊,第1张

list-style-position inside 占用li的宽度的,而outside则是在li的外面,他不占用li的宽度。就好像padding和margin差不多,inside 就相当于给li设置了padding,而outside就相当于margin,其实并非你看不出区别,只是你没仔细或者精确的计算而已,就是li前面那个点的位置不同,不信你同时写2个列表分别设置两个样式对比一下效果;

不过呢,我个人比较少用到这2个样式,还是用padding比较多,这样控制数值比较方便或者习惯了

text-indent: 2em

具体方法:

新建一个html代码文件,然后在这个html代码页面上创建一个<div>,同时给这个<div>设置一个class类;然后在这个<div>中创建几个<p>,并个<p>添加上内容。

代码:

<div class="cont">

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

<p>的顶顶顶顶顶的顶顶顶顶顶</p>

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

</div>

设置样式。在<title>标签后面新建一个<style>,在这个<style>设置cont类的宽为400px,然后设置p标签的首行缩进为两个字符。如图:

代码:

<style>

.cont{

width:400px

}

.cont p{

text-indent: 2em

}

</style>

使用浏览器打开,即可看到首行缩进的效果。如图:

所有代码。直接复制所有代码,粘贴到新建html文件上,保存后使用浏览器打开即可看到所有效果。

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>首行缩进</title>

<style>

.cont{

width:400px

}

.cont p{

text-indent: 2em

}

</style>

</head>

<body>

<div class="cont">

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

<p>的顶顶顶顶顶的顶顶顶顶顶</p>

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

</div>

</body>

</html>

扩展资料:

CSS text-indent属性规定文本块中首行文本的缩进。

注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。

注意:在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值,这会产生一种“悬挂缩进”的效果。

所有浏览器都支持 text-indent 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

参考资料来源:百度百科:CSS text-indent

css控制li和ul的边距,可以使用margin属性来实现或者padding属性都可以,在设置width和height属性时,计算好各自的距离,然后设置多少px就可以实现,下面介绍了一下简单的控制和去掉li前面圆点的方法

一、CSS控制ul缩进间距的方法:

<style type="text/css">

ul{margin-left:-10px}

</style>

<ul>

<li>XXX</li>

</ul>

二、CSS去掉li点的三种方法:

方法一:

<ul>

<li style="list-style-type:none">XXX</li>

<li style="list-style-type:none">XXX</li>

<li style="list-style-type:none">XXX</li>

<li style="list-style-type:none">XXX</li>

</ul>

方法二:

<style type="text/css">

li{list-style-type:none}

</style>

<ul>

<li>XXX</li>

<li>XXX</li>

<li>XXX</li>

<li>XXX</li>

</ul>

方法三:

<style type="text/css">

.li_style{list-style-type:none}

</style>

<ul>

<li class="li_style">XXX</li>

<li class="li_style">XXX</li>

<li class="li_style">XXX</li>

<li class="li_style">XXX</li>

</ul>