CSS常用位置样式

最新推荐文章于 2024-06-24 11:02:57 发布

欣怡

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量1.1k

点赞数 1

分类专栏：应用服务器文章标签：浮动内边距外边距样式优先级

本文链接：https://blog.csdn.net/niuch1029291561/article/details/84646988

版权

应用服务器专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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>

欣怡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常用位置样式

CSS margin 属性例子 1margin:10px 5px 15px 20px;上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px例子 2margin:10px 5px 15px;上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px例子 3margin:10px 5px;上外边距和下外边距是 10...
复制链接

扫一扫