CSS margin 属性
例子 1
margin:10px 5px 15px 20px;
- 上外边距是 10px
- 右外边距是 5px
- 下外边距是 15px
- 左外边距是 20px
例子 2
margin:10px 5px 15px;
- 上外边距是 10px
- 右外边距和左外边距是 5px
- 下外边距是 15px
例子 3
margin:10px 5px;
- 上外边距和下外边距是 10px
- 右外边距和左外边距是 5px
例子 4
margin:10px;
- 所有 4 个外边距都是 10px
margin-left: 0;
margin-bottom: -32px;
float
float: right;
可能的值
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
CSS3 border-radius 属性
向 div 元素添加圆角边框:
div{
border:2px solid;
border-radius:25px;
}
.common-border{
border: 1px solid #ccc;
}
/* common-border-cls */
// 上边框是点状
// 右边框是实线
// 下边框是双线
// 左边框是虚线
.common-border-cls {
border-style:dotted solid double dashed;
}
border-radius:2em;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
CSS border:1px solid #ccc;
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
- border-width
- border-style
- border-color
common-border{
border: 1px solid #ccc;
}
==>>
common-border{
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
样式优先级
.backgroup{
background: rgb(241, 248, 252) !important;
}
CSS padding 属性
设置元素的 4 个内边距:
p{padding:2cm 4cm 3cm 4cm;
}
单边内边距属性
也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:
- padding-top
- padding-right
- padding-bottom
- padding-left
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
例子 1
padding:10px 5px 15px 20px;
- 上内边距是 10px
- 右内边距是 5px
- 下内边距是 15px
- 左内边距是 20px
例子 2
padding:10px 5px 15px;
- 上内边距是 10px
- 右内边距和左内边距是 5px
- 下内边距是 15px
例子 3
padding:10px 5px;
- 上内边距和下内边距是 10px
- 右内边距和左内边距是 5px
例子 4
padding:10px;
- 所有 4 个内边距都是 10px
位置偏移
背景图片居中偏移:
body{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
图片显示偏移:
icon_menu_list_3.png) no-repeat -81px -20px
鼠标移上去显示手的样式
style="cursor:pointer;"
或
.cursor-pointer {
cursor: pointer;
}
vertical-align 属性设置元素的垂直对齐方式
vertical-align: text-top;
可能的值
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length | |
% | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
justify-content、align-items 居中
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
margin: 0 auto; /*水平居中*/
自动换行
自动换行:
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
多余的文字用省略号:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.unimanylineText { // 达到3行后省略
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: fit-content;
}
.unionelineText { // 达到1行后省略
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: fit-content;
}
横线样式
.line{
background: #333333;
// background: rgb(158, 158, 158);
margin:0;
padding:0;
width:100%;
height:1px;
overflow:hidden;
}
设置文本为单行,如果超出长度用省略号代替
// 实现文字超出省略号功能
<style>
.unilineText { /*设置文本为单行,如果超出长度用省略号代替*/
width: 70px; /*必须设置宽度*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
white-space: nowrap; /*规定段落中的文本不进行换行*/ /*强制不换行*/
}
</style>
<div class="unilineText">
文字超出宽度自动变成省略号文字超出宽度自动变成省略号文字超出宽度自动变成省略号文字超出宽度自动变成省略号文字超出宽度自动变成省略号
</div>
文字超出3行的部分变成省略号
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
鼠标位置获取
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
console.info('~~~~~~~~~~~~~~~~~x',x)
console.info('~~~~~~~~~~~~~~~~~y',y)
浮动窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>漂浮在网页右侧可关闭的浮动窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<p align="center">本特效由 <a href="http://www.daimajiayuan.com" target="_blank">代码家园</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</p>
<div id="ShowAD" style="position:absolute;z-index:100;">
<div style="width:135;height:18px;font-size:14px;font-weight:bold;text-align:left;cursor:hand;" onClick="closead();"><font color="ff0000">关闭</font></div>
这个窗口可以关闭噢。可以放漂浮广告哦!<br><a href="http://www.daimajiayuan.com/"><img src="/images/logo.gif"></a>
</div>
<script language="javascript">
var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
var adst = document.getElementById("ShowAD").style;
adst.top = ( bodyfrm.clientHeight -530-22 ) + "px";
adst.left = ( bodyfrm.clientWidth -155 ) + "px";
function moveR() {
adst.top = ( bodyfrm.scrollTop + bodyfrm.clientHeight - 530-22) + "px";
adst.left = ( bodyfrm.scrollLeft + bodyfrm.clientWidth - 155 ) + "px";
}
setInterval("moveR();", 80);
function closead()
{
adst.display='none';
}
</script>
<div id="Content" style="height:900px;"></div>
</body>
</html>
容器内的浮动实现: position: relative
<div style="position: relative">
<div style="position: absolute;top:1px;right:20px;">
aaa
</div>
</div>
计算宽度实现: calc
<div style="width: 100%">
<input style="width: calc(100% - 120px);"/>
<div style="width: 120px">选择</div>
</div>
CSS设置背景颜色为透明
background-color:transparent;
梯形
width: 72px;
height: 30px;
border-left: 10px solid transparent;
如图:
设置背景图片大小(背景拉伸): calc
.middle {
background-image: url('flowchart-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size:35% 100%; /* 老版本的 Firefox */
}
.middle {
background-image: url('flowchart-bg.png');
background-repeat: no-repeat;
background-size: 100% calc(100% + 45px);
-moz-background-size:100% calc(100% + 45px); /* 老版本的 Firefox */
background-position-y: -45px; /* 背景向上水平移动 */
}
滚动条样式
滚动条的设置
1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等
2. ::-webkit-scrollbar-button 滚动条两端的按钮
3. ::-webkit-scrollbar-track 外层轨道
4. ::-webkit-scrollbar-track-piece 内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式
参数配置说明:
::-webkit-scrollbar :滚动条整体部分,其中的属性: width,height,background,border等。
::-webkit-scrollbar-button :滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track :外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece :内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb :滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner :边角,两个滚动条交汇处
::-webkit-resizer :两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
示例1:
<style>
div {
width: 100px;
height: 300px;
border: 2px solid red;
overflow-x: scroll;
overflow-y: scroll;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
background-color: aqua;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:black;
}
</style>
示例2:
<style>
// 滚动槽颜色
.chart-scroll::-webkit-scrollbar-track {
/*background-color: #183f67;*/
}
// 滚动条颜色
.chart-scroll::-webkit-scrollbar-thumb {
background-color: #395977;
}
// 滚动条宽度
.chart-scroll::-webkit-scrollbar{
width: 14px;
}
// 滚动条鼠标 hover 样式
.chart-scroll::-webkit-scrollbar-thumb:hover {
background-color: #9c3;
}
// 滚动条点击拖动事件
.chart-scroll::-webkit-scrollbar-thumb:active {
background-color: #00aff0;
}
</style>