标签嵌套

最新推荐文章于 2024-02-04 00:00:00 发布

weixin_30391339

最新推荐文章于 2024-02-04 00:00:00 发布

阅读量252

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lgw1171435560/p/10319076.html

版权

标签嵌套规则

块级标签能够嵌套某些块级标签和内联标签(行内标签)
内联标签不能嵌套块级标签,只能嵌套内联标签
块级标签能够设置高度和宽度
内联标签不能设置高度和宽度(设置也没有效果)

CSS属性设置

　　宽和高

width:100px 设置宽度
height:100px 设置高度
border: 1px solid red 设置边框大小,颜色

.c1{width:100px;height:100px;border:1px solid red;}

　　字体属性

font-family 设置字体样式,可以设置多个样式,浏览器按顺序从中挑选能够显示的出来的

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

　　2.font-size 设置字体大小,如果设置为inherit表示继承父元素的字体大小

p {
  font-size: 14px;
}

　　3.font-weight 设置字体粗细

值        描述
normal    默认值，标准粗细
bold      粗体
bolder    更粗
lighter   更细
100~900   设置具体粗细，400等同于normal，而700等同于bold
inherit   继承父元素字体的粗细值

　　4.color 设置字体颜色

color:rgb(255,0,0)   #红绿蓝就是rgb的意思,第一个参数是红,最高255,最低0#详情看rgb颜色查询对照表
color:rgba(255,0,0,0.3)  #第四个参数设置色彩的透明度
color:#FF0000   #十六进制写法

　　text-align 文字对齐

值    描述
text-align:left    左边对齐 默认值
text-align:right    右对齐
text-align:center    居中对齐
text-align:justify    两端对齐

　　text-decoration 文字装饰

值                描述
text-decoration:none    默认。     定义标准的文本。
text-decoration:underline        定义文本下的一条线。
text-decoration:overline         定义文本上的一条线。
text-decoration:line-through    定义穿过文本下的一条线。
text-decoration:inherit         继承父元素的text-decoration属性的值。  

常用的为去掉a标签默认的自划线：
a {
  text-decoration: none;
}

首行缩进
p {
  text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}

　　背景属性

/*背景颜色*/
1.background-color: red;
/*背景图片*/
2.background-image: url('1.jpg');  #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下
 背景重复
3.background-repeat: repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
background-repeat: repeat-x：背景图片只在水平方向上平铺
background-repeat: repeat-y：背景图片只在垂直方向上平铺
background-repeat: no-repeat：背景图片不平铺

/*背景位置*/  #如果不写默认左上角
4.background-position: right top;(右边)    
        left top; (左边)
        center top(中间);
        center center(x,y的中间)
        left bottom 左下角
1,2,3,4的简写形式
backgroud: url("路径")  no-repeat right top; #right top可以替换为数值(距离左边,距离右边):200px 20px 
border:1px solid red;  #设置边框 

雪碧图
/*background-position: 200px 200px;*/ #以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片，就通过这个参数来调整，看下面的示例操作，现在很少用这个了

　　边框属性

border-width 宽度
border-style 样式
border-color 颜色
border-radius 圆角边框(要求值为百分比)

使用简写方式(边框大小,样式,颜色)：
#i1 {
  border: 2px solid red;
}
　边框样式
 值        描述
border-style:none   无边框。
dotted    点状虚线边框。
dashed    矩形虚线边框。
solid        实线边框。

单独为边框设置样式,top 顶部;bottom底部
#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius    设置圆角边框的效果(要求值为百分比,50为圆形)
border-radius:50%

设置圆形头像
    <style>

        .c1{
            /* 200*200是正方形 */
            width: 200px;
            height: 200px;
            #设置边框的样式和圆形边框
            border-left:  10px dashed green;
            border-right:  10px dashed red;
            border-bottom: 10px dashed yellow;
            border-top: 10px solid purple;
            border-radius: 50%;
            /*溢出的部分隐藏*/
            overflow: hidden;
        }
        .c1 img{
            /*按照父级标签的宽度来展示,并且进行等比缩放*/
            max-width: 100%;
        }
    </style>

</head>
<body>
    <div class="c1">
        <img src="xyjy.png" alt="">
    </div>

　　网页高级p图,今日爆款

打开页面后,按f12,然后点击console 清空里面的内容,填进下面内容,就可以修改页面钱数
document.body.contentEditable=true

　　　　 dispaly属性用于控制html元素的显示效果

　　值                    意义
display:"none"    　　 HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"    　　默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"    　　按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"  显示的效果同时具有行内元素和块级元素的特点。 (在一行且能设置宽高)

　　display:"none"与visibility:hidden的区别(都可以隐藏某个元素)：

　　visibility:hidden: 但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
　　display:none: 且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

盒子模型:

Box:
Content 里面的内容高度宽度就是我们设置 width 和 height
Padding:内边距(内填充)
Padding-left
Padding-right
Padding-top
Padding-bottom
Border: 边框

Margin 外边距,距离其他标签的距离,两个标签如果都设置了 margin,那么两个标签之间的距离取最大的那个 margin

标签占的宽度:content 宽度+左右 padding + 左右边框的距离

转载于:https://www.cnblogs.com/lgw1171435560/p/10319076.html

weixin_30391339

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签嵌套

标签嵌套规则块级标签能够嵌套某些块级标签和内联标签(行内标签)内联标签不能嵌套块级标签,只能嵌套内联标签块级标签能够设置高度和宽度内联标签不能设置高度和宽度(设置也没有效果)CSS属性设置　　宽和高width:100px 设置宽度height:100px 设置高度border: 1px solid red 设置边框大小,颜色.c1{wi...
复制链接

扫一扫