当前位置:网站首页>Positioning and decoration style
Positioning and decoration style
2022-04-23 08:05:00 【GuTaiWEI】
location
Positioning mode
Property value | Reference system | characteristic | remarks |
---|---|---|---|
static | position The default value of | nothing | Invalid set offset value |
relative ( Relative positioning ) | Oneself | Do not delist | It is usually used in the structure of son Jue father phase , The offset value is not needed at this time |
absolute ( Absolute positioning ) | Locate the nearest outer element or document ( Browser window ) | Complete de labeling | Usually used with offset values |
fixed ( Fixed position ) | Browser viewable window | Complete de labeling | Usually used with offset values , Don't follow the scroll bar , Width and height should be set |
sticky ( Viscous positioning ) | Itself and browser window | Partial off standard | A scroll bar appears on the page , At least one offset value needs to be set |
Be careful :
- Element is not set left、top、right、bottom When is invalid
- left and top The priority ratio right and bottom Be taller
- Positioning elements will become similar Inline block element Characteristics , Width and height can be set , Don't monopolize a line
- position Valid for all elements
- The level of positioning elements is the same , There is lamination , The rear positioning element will cover the front positioning element , Use Fixed position Need to pay attention to
Offset value
type | Value | remarks |
---|---|---|
left | px Or percentage | Usually and right Just one , When used at the same time left first |
top | px Or percentage | Usually and bottom Only one of them , When used at the same time top first |
right | px Or percentage | |
bottom | px Or percentage |
z-indx Display hierarchy
Format : z-index:
Integers ;
Be careful :
- The larger the value , The higher the display order , z-index The default value of is 0, You can set negative
- z-index Only with positioning can it take effect , By default , Positioned box Later generations live in
Application of positioning ( Vertical center )
/* The absolute positioning element is horizontally and vertically centered */
.box{
position: absolute;
/* Ideas 1:left:50% top:50% then margin-left:- Half the width of itself ; margin-top:- Half its height ; */
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
/* Ideas 2: left:0;top:0;right:0;bottom:0;margin:auto; */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: pink;
/* Ideas 3 left:50% top:50% transform:translate(-50%,-50%) */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Decorative style
vertical-align Set vertical alignment
Application scenarios : Applied to solve vertical problems Alignment issues for
Effective range : Valid only for inline elements or inline block elements
Property value :
- middle( Vertical center )
- top ( Align vertically up )
- bottom( Align vertically down )
- xxxpx( be based on baseline)
- Default Baseline alignment
Typical scenario : solve img No height is set outside div Bottom and img There is a gap at the bottom ( The reasons causing : Baseline alignment )
<style>
Solution 1:
img {
display:block;
}
Solution 2:
img {
vertical-align:middle;
}
Solution 3:
div {
font-size:0;
}
</style>
<div class="father"><img src="./images/1.jpg" alt=""></div>
cursor Set the mouse cursor
Common values :
default
arrowpointer
Little handstext
editmove
Crossnot-allowed
prohibit
border-radius Set rounded border
Setting mode :
/* Set four fillet radii Are all 10px*/
border-radius:10px;
/* Set four fillet radii All are wide 50%/ high 50% When the box is square, it can realize circle When it is rectangular, realize ellipse */
border-radius:50%;
/* Set separately Top left The upper right The lower right The lower left ( Clockwise ) Four fillet radii by 10px 20px 30px 40px*/
border-radius: 10px 20px 30px 40px;
/* Set the fillet radius of the upper left corner separately by 10px*/
border-top-left-radius:20px;
Hidden elements
Show hidden :
-
overflow:hidden
: Overflow hiddenoverflow:auto
: Scroll bar appears when overflowoverflow:scroll
: There's always a scroll baroverflow:visible
: Overflow display ( Default state )
-
opacity
:1 Completely opaque 0 Completely transparent 0.5 translucent
Implicitly hide :
-
display:none
: Pure Hidden , Does not occupy a space -
visibility:hidden
: Take up space
border-collapse Set up Border merge
table {border-collapse:collapse;/* Set border merging to realize thin line border */}
border Realize the small triangle
<style>
.box {
width: 0;
height: 0;
margin:50px auto;
border:20px solid;
/* Realize the isosceles right triangle with the arrow to the right */
border-color: transparent transparent transparent pink;
}
.box1 {
width: 0;
height: 0;
margin:50px auto;
border-style:solid;
border-width:0 150px 50px 150px;
/* Realize that the two right angle sides of the arrow to the right are 50 150 Right triangle of */
border-color:transparent transparent transparent red;
}
</style>
<div class="box"></div>
<div class="box1"></div>
版权声明
本文为[GuTaiWEI]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230624538807.html
边栏推荐
- Research on system and software security (4)
- How does Apache Hudi accelerate traditional batch mode?
- 云计算赛项--2020年赛题基础部分[任务3]
- Attack and defense world misc questions 1-50
- SAP tr manual import system operation manual
- nacos源码分析思路
- 内网渗透系列:内网隧道之icmp_tran
- Ctf-misc summary
- Internal network security attack and defense: a practical guide to penetration testing (VII): cross domain attack analysis and defense
- 输入 “ net start mysql ”,出现 “ 发生系统错误 5。 拒绝访问 ” 。问题详解
猜你喜欢
feign如何集成hystrix
TA notes of Zhuang understand (VII) < Lambert + Phong + shadow + 3evcolor + Ao >
Ribbon启动流程
C problem of marking the position of polygons surrounded by multiple rectangles
Chapter V investment real estate
SAP GUI security
Export all SVG files in the specified path into pictures in PNG format (thumbnail or original size)
DVWA靶场练习
內網滲透系列:內網隧道之icmpsh
Essays (updated from time to time)
随机推荐
第五章 投资性房地产
Intranet penetration series: dns2tcp of Intranet tunnel
内网渗透系列:内网隧道之icmp_tran
SAP self created table log function is enabled
一文了解系列,对web渗透的常见漏洞总结(持续更新)
【编程实践/嵌入式比赛】嵌入式比赛学习记录(二):基于TCP的图片流传输
Essays (updated from time to time)
内网渗透系列:内网隧道之dnscat2
Introduction to sap query enhanced development
Guoji Beisheng openstack container cloud environment construction
Talking about distributed storage from ES, mongodb, redis and rocketmq
1+x云计算中级--脚本搭建读写分离
Redis transaction implements optimistic locking principle
A series of articles, a summary of common vulnerabilities of Web penetration (continuously updated)
数据库之Mysql——概述安装篇
Research on software security based on NLP (I)
从ES、MongoDB、Redis、RocketMQ出发谈分布式存储
MySQL——第一章节(MySQL中的数据类型)
C problem of marking the position of polygons surrounded by multiple rectangles
KVM安装部署