css3基础点3

盒子容不下内容的展示：overflow属性 
hidden：超过的文字就会被隐藏，看不到 
scroll：看不到的文字可以通过滚动 看到 
auto：会根据内容自动的增加水平或者竖直的滚动条 
visible：与设置此属性效果一样，会影响布局 
另外还有：overflow-x，overflow-y

盒子大小设置：box-sizing 

盒子背景样式：backgroud-clip：

  1. border-box：内边距，边框和内容都会有效果
  2. padding-box：只有内边距和内容有背景效果
  3. content-box：只有内容会有背景效果

圆角边框：border-radius 属性设置 
图像边框：border-image

CSS3变形处理

transform属性： 
rotate(角度)：旋转 
scale（缩放比例） ：缩放 
skew （水平方向倾斜角度，垂直方向倾斜角度）：倾斜 
translate（x轴移动距离，y轴移动距离） ：移动

改变缩放的基准点：transform-origin属性 
通过改变基准点，可以使变形产生不一样的效果

inline-table

用于表格前后文字不换行，并可设置vertical-align 设置外部文字top对齐或者bottom对齐。

list-item

可以将div变为列表显示。

run-in/compact

将元素指定为以上两个类型时，若果元素后面还有block类型的元素，run-in元素将会被包含在block元素的内部，而compact类型的元素将被放置在左边。

时间： 2024-10-14 12:14:42

css3基础点3的相关文章

css3基础点

文本属性:color,font,text-decoration,text-align,vertical-align,white-space,content CSS3属性(内核前缀) Mozilla 内核   css前缀-moz; WebKit  内核   css前缀-webkit ;(谷歌已换用blink内核) Opera   内核   css前缀 -o ;    (欧朋已换用blink内核) Trident 内核   css前缀 -ms ; border-image  : stretch 拉伸

css3基础点2

transform:变形种类:的名称(对应的属性值),多个种类之间使用空格分隔.一个()中的属性值之间用逗号分隔. transition 属性是一个简写属性,用于设置四个过渡属性: transition-property  哪个属性实现过渡如:width transition-duration  完成过渡效果需要多少秒/毫秒 transition-timing-function  速度效果的运动曲线,如linear .ase-in .ease . ease-out .ease-in-out .

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果<

HTML5 CSS3 诱人的实例： 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

CSS3略谈（中二）

一.3D转换:三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换.和二维变形一样,三维变形可以使用transform属性来设置 1. 3D移动 l   方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length) l   示例: div:hover{ /*Y轴移动+100px*/ /*transform:translateY(10

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p