CSS3

2022-10-13
标签添加自动换行的属性

word-wrap:break-word;

white-space: pre-wrap;

white-space: -moz-pre-wrap;

white-space: -pre-wrap;

white-space:-o-pre-wrap;

word-wrap: break-word;

阅读更多

2022-10-13
wangeditor自带的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table td,
table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
table th {
border-bottom: 2px solid #ccc;
text-align: center;
}

/* blockquote 样式 */
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}

/* code 样式 */
code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
pre code {
display: block;
}

/* ul ol 样式 */
ul, ol {
margin: 10px 0 10px 20px;
}
阅读更多

2022-10-13
css3菜单点击demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>菜单</title>
    <style type='text/css'>
        .container {
            display: inline-block;
            cursor: pointer;
        }

        /*这就生成了三横杠的菜单*/
        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }
    </style>
    <script type="text/javascript">
        function myFunction(x) {
            x.classList.toggle("change");
        }
    </script>


</head>
<body>
    <p>点击菜单按钮变为 "X":</p>
    <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>
</body>
阅读更多

2022-10-13
css中的块元素与行内（内联元素）

块元素–常见元素div

1.独占一行
2.默认宽度是父元素的宽度（即撑满父元素）
3.默认高度由其内容撑开，所以无内容时候（若没有其它样式，height…）就消失了

行内元素–常见元素span

1.只占本身内容大小（设定width,height不会生效）
如果源代码两个span，换行排列（存在换行），而浏览器对其识别成一个空格出现两个元素水平排列，之间存在缝隙。
2.多个行内元素渲染呈现从左往右依次排列，无法容纳时自动换行
3.默认宽高都是由内容撑开（行内元素是无法设置宽高的，若无内容区就消失了）

阅读更多

2022-10-13
css 省略号表示溢出文本

1.先强制一行内显示文本

white-space: nowrap;

2.超出部分隐藏

overflow: hidden;

3.文字用省略号替代超出的部分

text-overflow: ellipsis;

阅读更多
浏览 次 |

© 2023 南疆 with help from Hexo and Twitter Bootstrap. Theme by Freemind.

container-narrow --> ▲