当前位置: 代码迷 >> 综合 >> CSS day5
  详细解决方案

CSS day5

热度:31   发布时间:2023-12-16 16:14:58.0

第五章

1.CSS的顺序书写

1.1.布局定位属性: display/position/float/clear/visibility/overflow/

1.2.自身属性:width/height/margin/padding/border/background

1.3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word

1.4.其他属性: content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

2.定位(position)

将盒子定在某个位置,自由浮动到其他盒子上面

子绝父相布局

定位 = 定位模式+边偏移

偏移(top bottom right left)

postiton:属性值

static 静态定位

relative 相对定位     ①相对与原来的标准流中的位置来说的 ②原来标准流的区域继续占有,后面的盒子依旧以标准的方式对待他

absolute  绝对定位   ①完全脱标--完全不占有位置  ②父元素没有定位,以浏览器为准定位 ③如果父元素有定位,以父元素为准

fixed   固定定位        ①完全脱标--完全不占有位置   ②只认浏览器,不随滚动条滚动   ③IE6低版本不支持固定定位

绝对定位的水平居中实现:①left:50%  ②margin-left:-(盒子自身的一半)

堆叠顺序: z-index:1可以调整堆叠属性(正整数或负整数),只配合定位使用

定位可以改变display的属性为inline-block

浮动元素和绝对(固定)定位不会触发外边距合并的问题

boeder-radius:左上,右上,右下,左下