重学CSS笔记

时间 2019-11-30

标签 css 笔记栏目 CSS 繁體版

原文原文链接

1. 圣杯布局和双飞翼布局

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

圣杯布局

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 200px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
    float: left;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}
复制代码

双飞翼布局

<div class="container">
    <div class="center-container">
        <div class="center"></div>
    </div>
    <div class="left">left</div>
    <div class="right">left</div>
<div>
复制代码

body {
    min-width: 630px;
}
.container {
    overflow: hidden;
}
.center-container {
    width: 100%;
    float: left;
}
.center-container .center {
    height: 150px;
    background-color: #94E8FF;

    margin-left: 100px;        /* 新添加的属性 */
    margin-right: 200px;       /* 新添加的属性 */
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
}
复制代码

2. 媒体查询

link媒体查询

你可能想针对将要显示页面的设备调整页面的样式，能够用media属性,在link元素中增长这个属性.如css

<link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)">
<link rel="stylesheet" href="lounge-print.css" media="print">
# 其余属性包括min-device-width,max-device-width,orientation(横向landscape,纵向portrait)
复制代码

css媒体查询

能够直接在css中增长媒体查询,使用@media规则,把对全部媒体类型都通用的规则放在@media规则下面,例如html

@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用
#guarantee {
  margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用
 #guarantee {
   margin-right: 30px;
 }
}
@media print { // 若是要打印页面，使用该规则
body {
  font-family: Times, "Times New Roman", serif;
}
}
复制代码

总结实践

若是css文件至关庞大，建议使用link元素
除了给出设备的媒体属性，若是你更关心浏览器大小，能够用max-width和min-width

3. Flex布局

/** 父容器：块级元素 | 行内元素 **/
display: flex | inline-flex; 

/** 
  *父容器能够设置如下属性 
  *
  */
flex-direction: row | row-reverse | column | column-reverse;
/**主轴方向：横左 | 横右 | 竖上 | 竖下 **/


flex-wrap: nowrap | wrap | wrap-reverse;/**换行方式： 不换行 | 换行从上排 | 换行从下排 **/ 

flex-flow：<flex-direction> || <flex-wrap>; /** 主轴及换行（简写），中间空格 **/

justify-content: flex-start | flex-end | center | space-between | space-around;
/**主轴对齐：起点 | 终点 | 中心 | 均分无边隙 | 均分有边隙**/


align-items: flex-start | flex-end | center | baseline | stretch;
/** 交叉轴对齐方式：起点 | 终点 | 中心 | 文字的基线对齐 | item未设置高度/auto，撑整个容器（默认值） **/


align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/**交叉轴多行/排对齐方式：起点 | 终点 | 中心 | 均分无边隙 | 均分有边隙 **/

复制代码

Flex布局小Demo浏览器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张真人</title>
<style> .container{ width:500px; height:600px; background:#e2e2e2; flex-direction:column-reverse; display:flex; flex-wrap:wrap; align-content:space-around; } .item{ width:100px; height:100px; line-height:100px; text-align:center; background:green; margin:5px; color:white; font-weight:600; font-size:42px; border-radius:50px; } </style>
</head>

<body>
	<div class="container">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
		<div class="item">9</div>
	</div>
</body>
</html>
复制代码

/**子元素能够设置一下属性**/

order: <integer>;/**排序：数值越小越靠前，默认值0**/

flex-grow: <number>; 
/*
放大比例：默认值0；
若是全部项目的 flex-grow 都为 1，则全部项目平分剩余空间；
若是其中某个项目的 flex-grow 为 2，其他项目的 flex-grow 为 1，则前者占据的剩余空间比其余项目多一倍。
*/

flex-shrink: <number>;
/*
缩小比例：默认值1；
空间不足时，会自动缩小
若是全部项目的 flex-shrink 都为 1，当空间不足时，全部项目都将等比缩小；
若是其中一个项目的 flex-shrink 为 0，其他都为 1，当空间不足时，flex-shrink 为 0 的不缩小。
负值对该属性无效
*/

flex-basis：10px | 10%;
/*
主轴上宽或高：默认auto; 优先级高于width/height
*/

flex: <flex-grow> || <flex-shrink> || <flex-basis> ;默认值：0 1 auto,后两个属性可选;
/*
放大缩小空间简写: 
两个快捷值：
  auto（1 1 auto）表明在须要的时候能够拉伸也能够收缩;
  none（0 0 auto）表示既不能拉伸也不能收缩;
*/

align-self: auto | flex-start | flex-end | center | baseline | stretch;

/*
当前对齐方式,能够覆盖 align-items 属性;
用来定义单个项目与其余项目不同的对齐方式，能够覆盖 align-items 属性;
默认属性值是 auto，即继承父元素的 align-items 属性值;
当没有父元素时，它的表现等同于 stretch;
*/

复制代码

1. css权重问题--学习笔记
2. CSS 重要笔记（一）
3. CSS 学习笔记——CSS Selector
4. CSS学习笔记
5. css学习笔记
6. 【学习笔记】CSS
7. CSS 学习笔记
8. 【CSS】学习笔记
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议