分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

前端开发之css

发布时间:2023-09-06 02:25责任编辑:傅花花关键词:前端开发前端
<!--
页面中的组成部分
通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息)

css 属性/尺寸/边框/背景

1.css的尺寸属性,就是大小
width max-width min-width
height max-height min-height

2.css的边框属性
border-style 边框风格
???????????none:无边框。 border-color和boder-width都将被忽略
???????????hidden:隐藏边框。
???????????dotted:点状边框。
???????????dashed:虚线边框。
???????????solid:实线边框。
???????????double:双线边框。两条单线与其间隔的和等于指定的border-width的值。
???????????groove:3D凹槽轮廓。
???????????ridge:3D凸槽轮廓。
???????????inset:3D凹边轮廓。
???????????outset:3D凸边轮廓。

border-color 边框颜色
border-width 边框宽度


3.内边距属性
padding-left: 20px; 左边距
padding-top: 50px; ?上边距
padding-right: 100px;右边距
padding-bottom: 150px;下边距

/*复合属性*/
padding: 值; 上下左右

/*padding: 20px;*/
/*padding: 20px 40px;*/ ??上下 左右
/*padding: 20px 40px 60px;*/ ?上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左


4.css背景属性



-->




<!DOCTYPE html>
<html>
<head>
???<meta charset="UTF-8">
???<title>张仁国杨静结婚啦</title>
???<style type="text/css">
???????.item {
???????????/*设置元素的宽高*/
???????????/*width: 300px;*/
???????????/*max-width: 300px;*/
???????????/*min-width: 300px;*/
???????????width: 600px;
???????????/*height: 400px;*/
???????????/**/

???????????/*border 边框*/

???????????border-style: solid;
???????????border-color: #f90;
???????????border-width: 1px;

???????????/*复合属性*/
???????????/*border: 2px solid red;*/



???????????/*内边距 ?padding*/
???????????padding-left: 20px;
???????????padding-top: 50px;
???????????padding-right: 100px;
???????????padding-bottom: 150px;

???????????/*复合属性*/
???????????/*padding: 20px;*/
???????????/*padding: 20px 40px;*/
???????????/*padding: 20px 40px 60px;*/
???????????padding: 10px 20px 30px 40px;


???????}

???</style>
</head>
<body>
???<h1>CSS的尺寸属性 边框属性 内边距</h1>
???<hr>


???<div class="item">
???????Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam consectetur corporis dolorum, earum eos et explicabo fuga harum id itaque maiores nam nobis possimus quasi ratione suscipit totam vitae?
???</div>

</body>
</html>

前端开发之css

原文地址:https://www.cnblogs.com/zhangrenguo/p/10080934.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved