<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!-- -->
<style type="text/css">
body{
text-align: center;
font:黑体;
}
#color{
color:blue;
}
/*left,right,top,bottom分别表示距离左右上下的位置。height和weight表示高和宽。
position属性控制以什么方式定位图层，absolute：网页右上角；relative：原始值的位置；static：HTML默认位置*/
/*上下两个层之间放在一起时，magin层边距将会发生合并，以大的为标准
两个不同页面内容的边距彼此相邻时，也会发生合并。可以在其中一个内容加边框或空距防止*/
#div1{
color: aqua;
left:100px;
top:10em;
width: 300px;
height: 300px;
magin:3em; /*外边距，可以为负值，达到叠加目的*/
padding:1em 2em 3em 4em; /*页边距分别为上，右，下，左，不可以为负值*/
background:url(MySource/smiley.gif) left repeat-y; /*使用自定义图片修改边距样式*/
border-style: dashed; /*边框样式 solid dotted dashed长方体斑点吧 等*/
border-color:darkgray; /*边框颜色*/
border-width:1em; /*边框宽度*/
/*有时层中内容超过初始设定范围时，会自动拉伸层的大小，如果不希望拉伸，设定overflow*/
overflow: auto; /*auto超出时显示滚动条 scroll超出与否都显示滚动条 hidden都不显示滚动条，会丢掉溢出的*/
display:block; /*block块级对象 inline行级对象，好几个inline的对象好像就显示在一行里 inline-block行内框*/
}
/*盒布局，现在大家一般都不支持欸，(￢︿̫̿￢☆)*/
.container{
/*开启盒布局*/
display:box;
/*元素的布局方向 vertical 从上到下
horizontal 从左到右
inline-axis 沿着内联轴 表现为横向编排
block-axis 沿着块轴 表现为纵向编排
inherit 继承父类中box-orient的值
*/
box-oriednted:vertical;
/*元素的布局顺序 reverse：反向； normal：正向； inherit：继承父类中box-direction的值*/
box-direction:reverse;
/*改变元素的位置；谁的值大谁排在后面*/
box-ordinal-group:2;
/*弹性空间分配，默认0.0
例如id1的box-flex设置为1 id2的box-flex设置为2 则id1会得剩余空间的1/3， id2会得到剩余空间的2/3*/
box-flex:0.0;
/*元素的对齐方式*/
/*水平空间分配 center置中 start左 end右 jsutify平均，最左和最有没有空间！！！*/
box-pack:center;
/*垂直空间分配 center置中 start上 end下 baseline：基线 strech：和justify差不多*/
box-align:center;
/*增强的盒属性*/
/*阴影效果*/ /*正右上负左下*/
/*分别为阴影类型inset：内阴影，默认外阴影； 阴影水平位移，垂直位移，模糊距离（可选），大小（可选），颜色（可选）*/
box-shadow:inset 5px 5px 5px 5px #333;
/*盒子尺寸的计算方法 border-box 指定的宽度和高度包括content+padding+border
inherit：和他爸爸一样 padding-box 指定的宽度和高度包括content+padding
content-box 指定的宽度和高度包括content */
box-sizing: border-box;
/*内容溢出处理方法*/
/*auto超出时显示滚动条 scroll超出与否都显示滚动条 hidden都不显示滚动条，会丢掉溢出的 visible显示在盒外
no-conten:不显示内容 no-display不显示元素*/
overflow-x:auto;
overflow-y: auto;
}
/*增强的用户界面设计*/
#div2{
/*允许用户改变尺寸 both：都能改 none：默认，不能改 horizontal:能宽度 vertical:能高度 inherit：像爸爸*/
/*需要和overfolw或overfolw-x，overfolw-y一起使用，且不能设置为visible*/
resize: both;
/*外轮廓线*/
outline: #EA171B;
/*派生属性*/
/*轮廓宽度 thin metium thick 或者可以直接上数，不允许为负值 inherit*/
outline-width: medium;
/*轮廓颜色 直接颜色值 invert：与背景色相反 inherit*/
outline-color: aqua;
/*轮廓与元素边界的距离*/
outline-offset: -2px;
/*轮廓的风格
dashed虚线 dotted点状 none默认没有 solid实线 double双线条 groove3D凹槽 ridge3D凸槽
inset3D凹边 outset3D凸边 inherit*/
outline-style: dashed;
/*伪装appearence noemal正常默认 icon装成图标 window装成视窗 button装成按钮 menu装成菜单 field装成输入框*/
appearance:button;
}
#div3 a{
counter-increment: mycounter; /*定义计数器*/
}
#div3 a:before{
/* content normal默认不加 none如果有指定的添加内容设置为空 string：文本 counter：计数器 attr（at） at的属性值
url（别）外部资源 inherit*/
content:counter(mycounter);
}
#div4 {
/*多列属性columns columns:<column-width>||<column-count> 如果缩小窗口，可能列数和宽度都会变化*/
/*如果只设置column-width，缩小窗口宽度不变，列数变化
如果只设置column-count，缩小窗口列数不变，宽度变化*/
columns:200px 3;
column-width：200px; /*auto自动默认 宽度*/
column-count: 3; /*auto默认自动 列数*/
/*列间距column-gap*/
column-gap: 3em; /*normal默认值 数字*/
/*column-rule列分割线 column-rule:[column-rule-width]||[column-rule-style]\\[column-rule-color]*/
/*也可以分别赋值*/
column-rule: 1px solid #CA4245;
/*定义横跨所有列 column-span:1|all all:横跨所有列 1：只在一列显示*/
column-span: all;
}
</style>
</head>
<body>
<!-- span行内的对象,div层内对象,如果div不引用样式表，相当于p标签-->
《烬余录》像是一个历经沧桑的老人所写，<span id="color">但是当时的张爱玲只有23岁。</span>她对自己的冷酷和自私，有一种抽离
<div id="div1">
这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。这是层的定位演示，心情复杂。
</div>
<!--层的叠加，谁先写的谁在下面-->
<!--盒布局-->
<div class="container">
<div>你好</div>
<div>你好啊</div>
<div>你好啊</div>
</div>
<div id="div2">增强的用户界面设计</div>
<div id="div3">
<a href="">CSS</a>
<a href="">CSS</a>
<a href="">CSS</a>
<a href="">CSS</a>
</div>
<div id="div4">多列布局</div>
</body>
</html>CSS知识点2
猜你喜欢
转载自blog.csdn.net/qq_39326472/article/details/84777795
今日推荐
周排行