JavaEE - A计划(永久有效期) 扫二维码继续学习 二维码时效为半小时

(18评价)
优惠后 ¥1599.00优惠前 ¥1999.00 双十一全年最大力度限时优惠
1对1 答疑即时回复7天无理由退款30天价保提问必答

服务保障

1对1 答疑

提供专属的一对一在线答疑,快速答疑解惑。

即时回复

及时响应学习咨询,帮助解决问题。

7天无理由退款

购买后7天内可申请无理由退款。

30天价保

购买后30天内如遇降价,可申请价保。

提问必答

对于提问做到有问必答,帮您扫清学习过程中的种种障碍

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>京东例子</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
            background-color:#f0f3ef;
        }
        .title{
            text-align:center;
            font-family:"fzzzh";
            color:#222;
        }
        .container{
            /* background-color:red; */
            width:1190px;
            height:450px;
            margin:0 auto;
        }
        .left,.center,.right{
            width:390px;
            height:450px;
            float:left;
            background-color:white;
        }
        .left{
            background-color:transparent;
        }
        .left,.center{
            margin-right:10px;
        }
        .border{
            width:340px;
            height:420px;
            border:5px solid black;
            position:relative;
            top:20px;
        }
        .border img{
            position:absolute;
            bottom:25px;
            left:45px;
        }
    </style>
</head>
<body>
    <h3 class="title">--- 居家优品 ---</h3>
    <div class="container">
        <div class="left">
            <div class="border">
                <img src="img/left.jpg" />
            </div>
        </div>
        <div class="center">2</div>
        <div class="right">3</div>
    </div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-10 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>京东例子</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
            background-color:#f0f3ef;
        }
        .title{
            text-align:center;
            font-family:"fzzzh";
            color:#222;
        }
        .container{
            background-color:red;
            width:1190px;
            height:450px;
            margin:0 auto;
        }
        .left,.center,.right{
            width:390px;
            height:450px;
            float:left;
            background-color:white;
        }
        .left,.center{
            margin-right:10px;
        }
    </style>
</head>
<body>
    <h3 class="title">--- 居家优品 ---</h3>
    <div class="container">
        <div class="left">1</div>
        <div class="center">2</div>
        <div class="right">3</div>
    </div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-10 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>京东例子</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
            background-color:#f0f3ef;
        }
        .title{
            text-align:center;
            font-family:"fzzzh";
            color:#222;
        }
        .container{
            background-color:red;
            width:1170px;
            height:450px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <h3 class="title">--- 居家优品 ---</h3>
    <div class="container"></div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-10 · 0
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }

        .one {
            /* 静态定位 普通文档流的形式 */
            position: static;
            background-color: red;
        }

        .two {
            /* width: 100px;
            height: 100px; */
            /* 相对定位,相对于自身原来的位置。原来的框还在文档流里面占有空间。 
            position: relative; */
            /* 绝对定位的元素的位置相对于最近的已定位祖先元素 */
            /* position: absolute; */
            /* top: 20px;
            left: 50px; */
            /* bottom: 10px; */
            /* right: 10px; */
            background-color: green;
            right: 0px;
            bottom: 0px;
            position: fixed;
        }

        .three {
            position: relative;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
    <p>1 2 3</p>
</body>

</html>

固定定位不会随着滚动条滚动)

绝对定位的元素会相对于滚动条滚动的

[展开全文]
遗失的星空 · 2022-02-10 · 0
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }

        .one {
            /* 静态定位 普通文档流的形式 */
            position: static;
            background-color: red;
        }

        .two {
            width: 100px;
            height: 100px;
            /* 相对定位,相对于自身原来的位置。原来的框还在文档流里面占有空间。 
            position: relative; */
            /* 绝对定位的元素的位置相对于最近的已定位祖先元素 */
            position: absolute;
            /* top: 20px;
            left: 50px; */
            bottom: 10px;
            right: 10px;
            background-color: green;
        }

        .three {
            position: relative;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="three">
        <div class="two"></div>
    </div>
</body>

</html>

框的position属性
static 静态定位,自然定位。正常,默认属性。
relative 相对定位,相对于自身原来的位置。原来的框还在文档流里面占有空间。
absolute 绝对定位,相对于父元素,自身会脱离文档流。
fixed 固定定位,相对于浏览器的窗口来说的。
不会随着浏览器滚动而滚动

[展开全文]
遗失的星空 · 2022-02-10 · 0
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }

        .one {
            /* 静态定位 普通文档流的形式 */
            position: static;
            background-color: red;
        }

        .two {
            /* 相对定位,相对于自身原来的位置。原来的框还在文档流里面占有空间。 */
            position: relative;
            top: 20px;
            left: 50px;
            background-color: green;
        }

        .three {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>

</html>

 

[展开全文]
遗失的星空 · 2022-02-10 · 0
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }

        .one {
            height: 350px;
            background-color: red;
            float: left;
            /* none | right | left */
        }

        .two {
            width: 350px;
            background-color: green;
            float: right;
        }

        .three {
            background-color: blue;
            float: right;
        }

        p {
            height: 100px;
            background-color: green;
            /* clear: both; */
            /* both既清除右浮动,也清除左浮动 */
        }

        .clear {
            height: 0px;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="clear"></div>
    <p></p>
</body>

</html>
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>文字环绕图片</title>
    <style type="text/css">
        img {
            float: right;
        }
        .clear{
            clear:both;
        }
    </style>
</head>

<body>
    <img src="img/api.jpg" />
    <div class="clear"></div>
    <p>其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。
        哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。
        同年,W3C组织(World WideWeb
        Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas
        Reaxdon),他的努力最终令Internet
        Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level
        1)完成,成为w3c的推荐标准。
    </p>
</body>

</html>

 

[展开全文]
遗失的星空 · 2022-02-10 · 0
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }

        .one {
            background-color: red;
            float: left;
            /* none | right | left */
        }

        .two {
            width: 350px;
            background-color: green;
            float: left;
        }

        .three {
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>

</html>

 

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>普通文档流</title>
</head>
<body>
    <div>1 2 3</div>
    <div>4 5 6</div>
    <p>7 8 9</p>
    <div>10 11 12</div>
    <div>13 14 15</div>
    <div>16 17 18</div>
    <h1>19 20 21</h1>
    <span>22 23 24</span>
    <span>22 23 24</span>
    <span>22 23 24</span>
    <span>22 23 24</span>
    <span>22 23 24</span>
    <span>22 23 24</span>
    <span>22 23 24</span>
</body>
</html>
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
        }
        .one{
            background-color:red;
            float:left;/* none | right | left */
        }
        .two{
            width:350px;
            background-color:green;
        }
        .three{
            background-color:blue;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>

</html>

一些皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

CSS的几种定位机制
普通文档流
浮动
绝对定位、相对定位、固定定位

普通文档流
块级元素单独占一行,行内元素放在一行,从上到下排布。

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>边框颜色</title>
    <style type="text/css">
        div{
            /* background-color: red; */
            width:500px;
            height:500px;
            /* border-style:dashed;
            border-width:20px;
            border-color:#0000FF #008000 #00FFFF #DEB887; */
            /* border-top-color:#0000FF;
            border-right-color:#008000;
            border-bottom-color:#00FFFF;
            border-left-color:#DEB887; */
            /* border:20px dashed yellow; */
            /* border-width border-style border-color
            border-top/right/bottom/left-width/style/color; */
            border:2px solid;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>边框宽度</title>
    <style type="text/css">
        div{
            background-color: red;
            width:500px;
            height:500px;
            border-style:double;
            border-width:10px 20px 30px 40px;/*10px 20px|10px 20px 30px*/
            /* border-top-width:10ox;
            border-right-width:20px;
            border-bottom-width:30px;
            border-left-width:40px; */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框
border:5px solid red;
border-top...

border-style: outset;
border-style: solid dotted dashed double; 上右下左
border-right..-style
border-style: none; 没有边框

border-width: 5px;thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px
border-width: 15px 5px 15px 5px;
border-width: 15px 5px; 值复制
border-right..-width

border-color: blue rgb(25%,35%,45%) #909090 red;
border-right...-color
border-color: transparent; 透明边框,有边框,只不过不可见

border-radius 边框转角

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>边框border</title>
    <style type="text/css">
        div{
            width:500px;
            height:500px;
            /* border:10px solid green; */
            border:10px;
            /* border-style:groove; 默认none; dashed短虚线; dotted圆点虚线; double双实线; groove 有点3D感觉的线; hidden */
            /* border-top-style:dashed;
            border-right-style:dotted;
            border-bottom-style:double;
            border-left-style:outset; */
            border-style:dashed dotted double outset;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框
border:5px solid red;
border-top...

border-style: outset;
border-style: solid dotted dashed double; 上右下左
border-right..-style
border-style: none; 没有边框

border-width: 5px;thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px
border-width: 15px 5px 15px 5px;
border-width: 15px 5px; 值复制
border-right..-width

border-color: blue rgb(25%,35%,45%) #909090 red;
border-right...-color
border-color: transparent; 透明边框,有边框,只不过不可见

border-radius 边框转角

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>外边距自动合并</title>
    <style type="text/css">
        .one,.two{
            width:300px;
            height:300px;
        }
        .one{
            background-color: red;
            margin-bottom:30px;
        }
        .two{
            background-color: green;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

上下元素的外边距,采用了更大的30px。红绿色块之间的间隔是30px。

合并外边框,变大,采取最大的那个。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>外边距自动合并</title>
    <style type="text/css">
        .one{
            width:300px;
            height:300px;
        }
        .two{
            width:100px;
            height:100px;
        }
        .one{
            background-color: red;
            margin-top:30px;
        }
        .two{
            background-color: green;
            margin-top:50px;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>
</html>

都是距离顶部的外边距,采取更大的外边距。so距离顶部是50px

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>外边距margin</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            /* margin:10px; */
            width:500px;
            height:500px;
            /* margin:10px 20px 30px 40px;/* 上右下左 
            margin:10px 20px;/* 10 20 
            margin:10px 20px 30px; /* 20 
            padding:10px 20px; */
            margin:0 auto;
        }
        .parent{
            width:500px;
            height:500px;
            background-color:red;
        }
        .child
        {
            width:200px;
            height:100px;
            background-color:green;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

        </div>
    </div>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

外边距
margin : 0.25in;
margin : 10px 0px 15px 5px;上右下左
margin : 10%; 按照父元素的width来计算百分比
margin: 0.5em 1em; 值复制
margin-left...
margin:auto;左右居中

外边框 自动合并

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>内边距padding</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            margin:0px;
            width:500px;
            height:500px;
            /* padding:10px; /* 1em|xx% */ /* 百分比相对于父元素的width来计算的 */
            /* padding-top:20px;
            padding-right:10px;
            padding-bottom:15px;
            padding-left:5px; */
            padding:10px 20px 30px 40px;/* 上右下左 */
        }
    </style>
</head>
<body>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

内边距
padding: 10px;
padding: 10px 0.25em 2ex 20%;上右下左

padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
注意:
百分比是相对于父元素的width来计算的。

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            margin:0px;
            width:50%;/* 相对于父元素来说 */
            height:50%;
        }
    </style>
</head>
<body>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

高宽
width:90px;
width:50%;相当于父元素的width来计算。
height:90px;
height:80%;

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            margin:0px;
        }
    </style>
</head>
<body>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-09 · 0

酒盒举例
对应网页中的盒子模型 http://www.w3school.com.cn/css/css_boxmodel.asp
盒子三要素:内边距,外边距和边框。(内边距和外边距也就是内填充和外填充)
内边距:padding    外边距:margin    边框:border
高宽指的是内容的高宽 width height

盒子宽度计算
width+(padding+border+margin)*2

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>基本盒子</title>
    <style type="text/css">
        body{
            padding:0px;
            margin:0px;
        }
        div{
            width:300px;
            height:300px;
            border:10px solid;
            padding:20px;
            margin:30px;
        }
    </style>
</head>
<body>
    <div>
        1111122223333444444555556666
    </div>
    eqwqweqweqweqw
</body>
</html>

 

[展开全文]
遗失的星空 · 2022-02-09 · 0

酒盒举例
对应网页中的盒子模型 http://www.w3school.com.cn/css/css_boxmodel.asp
盒子三要素:内边距,外边距和边框。(内边距和外边距也就是内填充和外填充)
内边距:padding    外边距:margin    边框:border
高宽指的是内容的高宽 width height

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
        .one{
            display: block;
        }
        .three{
            display:inline;
        }
    </style>
</head>
<body>
    <span class="one">第一个</span>
    <span class="two">第二个</span>
    <div class="three">第三个</div>
</body>
</html>

css中的单位
第一种:px像素,显示大小收到显示器分辨率的影响。
第二种:相对大小em : https://www.w3cplus.com/css/px-to-em  
em是相对大小1em就是相当于父元素大小的1倍。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

块级元素和行内元素
display:linline block;

[展开全文]
遗失的星空 · 2022-02-09 · 0
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style type="text/css">
        ul{
            list-style-type:square;/* disc实心圆; circle空心圆; square实心正方形; none无样式 */
            list-style-image:url(img/html-tags2.png);
        }
        .one{
            /* list-style-position:outside; */
            list-style:none url(img/html-tags2.png) inside;
        }
        .two{
            list-style-position:inside;
        }
        ol{
            list-style-type:lower-alpha;/* decimal数字; lower-roman小写罗马数字; upper-roman大写罗马数字; lower-alpha小写字母;  */
            list-style-image:url(img/html-tags2.png);
        }
    </style>
</head>
<body>
    <ul class="one">
        <li>多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)</li>
        <li>网络编程(UDP TCP Socket)</li>
        <li>枚举类型</li>
        <li>类的加载机制和反射(Reflect)</li>
    </ul>
    <ul class="two">
        <li>多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)多线程(Thread Runnable)</li>
        <li>网络编程(UDP TCP Socket)</li>
        <li>枚举类型</li>
        <li>类的加载机制和反射(Reflect)</li>
    </ul>
    <ol>
        <li>多线程(Thread Runnable)</li>
        <li>网络编程(UDP TCP Socket)</li>
        <li>枚举类型</li>
        <li>类的加载机制和反射(Reflect)</li>
    </ol>
</body>
</html>

列表
ul
list-style-type:circle; none square http://www.w3school.com.cn/cssref/pr_list-style-type.asp
ul li
list-style-image:url(xxx.jpg);
ul
list-style-position:inside;

ul {list-style : url(example.gif) square inside}

[展开全文]
遗失的星空 · 2022-02-09 · 0