当前位置：网站首页>11、 Box styles and user interface

11、 Box styles and user interface

2022-06-26 11:30:00 【Wayne830】

1、 Use the relevant style of the box : In Web Design , Fill often (padding)、 Frame (border)、 The border (margin) Wait for some attributes .CSS Box patterns also have these properties . Through these properties , Users can put different content in it , And determine where the content is placed .
① Basic types of boxes :CSS The box model is CSS Layout basis , Specifies how web page elements are displayed , And the interrelationship between the elements . The box model is used to describe HTML Element to form a rectangular box . It involves adjusting the outer margin for each element (margin)、 Frame (border)、 padding (padding) And content .
Insert picture description here
In the above schematic diagram , The outermost border refers to the outer boundary of the browser . Between the second layer and the third layer refers to the element border style .
demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> .box{
       height: 100px;/*  Define element height  */ width: 300px;/*  Define element width  */ margin: 20px;/*  Define the boundary of the element  */ padding: 20px;/*  Define element padding  */ background-color: yellow;/*  Define the element background color  */ border: 20px solid #C60;/*  Define element borders  */ } </style>
    <title>Document</title>
</head>
<body>
    <div class="box"> Box model structure </div>
</body>
</html>

Insert picture description here
notes :Ⅰ Under default layout , When an element contains content ,width and height It will automatically adjust to the height and width of the content .
Ⅱ The size calculation formula of the box model
Total element width = Left boundary + The left margin + padding-left + wide + Right fill + Right margin + Right border
Total height of element = Upper boundary + On the border + Fill in + high + Next fill + Under the frame + Lower boundary
② The border margin
stay CSS in , The boundary is also called the outer patch , The easiest way is margin attribute . It can accept any unit of length . This property can have 1-4 It's worth .

{
    margin:<top> <right> <bottom> <left>}

③ Frame border
Page element borders can be used border Property to set . This attribute allows the user to define all border styles for web page elements 、 Width and color .

{
    border:width style color}

④ Content overflow
overflow Property to retrieve or set how to handle the contents of an object when it overflows its specified height and width . This attribute defines how the overflow element content area is handled . If the value is scroll, Whether or not you need , User agents have a scrolling mechanism . So it's possible Even if you can put everything in the element box , But there will also be scrollbars .

{
    overflow:visible auto hidden scroll}
Property value meaning
visible Don't cut content or add scrollbars .
Suppose the display declares this default value , The object will be cut to contain the window or frame Size and clip Property settings will be invalidated
auto This is a body Objects and textarea The default value of . Cut content and add scrollbars when needed
hidden Do not show content that exceeds the size of the object
scoll Always show scroll bar

demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> .test_demo{
       overflow: scroll; height: 120px; width: 200px; float: left; background-color: coral; } .test_x{
       float: left; overflow: auto; height: 120px; width: 200px; background-color: cornsilk; } </style>
    <title>Document</title>
</head>
<body>
    <div class="test_demo"> Nothing is immutable . Life is like nature , There is spring , There are also golden autumn ; There is a hot summer , There are also cold winters . Neither good nor bad luck can last long . For sudden situations , If you are not fully prepared , Then bad luck will be like the waves of the sea , On the coast where you live, it goes up and down and beats incessantly . Corresponding , Highs and lows , Sunrise and sunset , Just look at the name , Happiness and disappointment , Will come into being </div>
    <div class="test_x"> Winter rejects timid hesitation with severity , But with enthusiasm to meet the brave embrace , Hide in the warm cabin and pray for the warmth of spring , Must not be able to taste the deep rhyme of winter . Rejected the harsh winter , Also refused to cast a strong opportunity .</div>
</body>
</html>

Insert picture description here
⑤ Insert content
content Property is used to insert content . This attribute is used with before and after Pseudo elements are used in conjunction with , Place generated content before or after an element content .
in addition , The box type created by this content can use display Attribute control .

{
    content:normal/string/attr()/url/counter()}
Parameters meaning
normal The default value is
string Insert text content
attr() Insert the attribute value of the element
uri() Insert an external resource ( Images 、 audio frequency 、 Video or any other resources supported by the browser )
counter() Counter , Used to insert sort id

demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> .TEXT{
       width: 400px; height: 50px; line-height: 50px; overflow: hidden; text-align: center; color: #FF0000; border: 1px dashed black; } #TEXT_C::before{
       content: " Your browser supports content attribute "; } </style>
    <title>Document</title>
</head>
<body>
    <div id="TEXT_C" class="TEXT">--content attribute </div>
</body>
</html>

Insert picture description here
⑥ Control browser behavior
box-sizing Property allows the user to specify and control the behavior of the browser by calculating the width of an element .

{
    box-sizing:content-box border-box inherit}
Parameters meaning
content-box The browser's interpretation of the box model follows W3C standard
border-box Browser on the box model of Jess and IE6 identical

⑦ Area scalable
resize Property setting makes the area of the element scalable , Able to adjust the size of elements . It applies to arbitrary access overflow Container for attribute conditions .

{
    resize:none/both/horizontal/vertical/inherit}
Parameters meaning
noneUserAgent No sizing mechanism provided , The user cannot manipulate the mechanism to adjust the element size
bothUserAgent Provide two-way sizing mechanism , Allows users to adjust the width and height of elements
horizontalUserAgent Provide one-way horizontal sizing mechanism , Let the user adjust the width of the element
verticalUserAgent Provide one-way vertical sizing mechanism , Let the user adjust the height of the element
inherit Default inheritance

demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> div{
       width: 300px; height: 80px; padding: 16px; border: 1px solid black; overflow: auto; } .resize{
       resize: vertical; } .resize2{
       resize: horizontal; } </style>
    <title>Document</title>
</head>
<body>
    <div class="resize">Chrome、Safari Allow element scaling   But not yet fully supported   At present, only two-way adjustment is allowed  CSS3 Allows you to apply this attribute to any element   This will provide cross browser support for scaling </div>
    <div class="resize2">Chrome、Safari Allow element scaling   But not yet fully supported   At present, only two-way adjustment is allowed  CSS3 Allows you to apply this attribute to any element   This will provide cross browser support for scaling </div>
</body>
</html>

Insert picture description here
2、 User interface module
Text can be shaded , Then users can also give div Add a shadow to the label , And add shadow effects to the graphics . In addition, users can add contour effect to some elements in the web page .
① Set border shadow
box-shadow Attributes are similar to text-shadow attribute .box-shadow Attribute is to give the object a layer shadow effect .

{
    box-shadow: Projection mode  X Shaft offset  Y Shaft offset   Shadow blur radius   Shadow spread radius   Shadow color ;}
Parameters meaning
Projection mode Optional value Do not set default to outer shadow inset The attribute value is inner shadow
X Shaft offset Shadow horizontal offset Its value can be positive or negative
If positive The shadow is on the right side of the object ; conversely The shadow is to the left of the object
Y Shaft offset Shadow vertical offset Its value can be positive or negative
If positive The shadow is at the bottom of the object ; conversely The shadow is on top of the object
Shadow blur radius Optional value Can only be non negative if 0 Indicates that the shadow has no blur effect ; The higher the value, the more blurred the shadow edge
Shadow spread radius Optional value Its value can be positive or negative If it is positive Indicates that the entire shadow is extended And vice versa
Shadow color Optional value If not set The browser takes the default color It is not recommended to omit this parameter

notes : The default value of shadow color is set according to each browser , Especially in Webkit Under the kernel Safari and Chrome The browser will default to colorless , Therefore, it is not recommended to omit this parameter .
demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> div{
       margin: 20px; width: 400px; height: 70px; border: 1px solid #666; } .shdow1{
       box-shadow: 2px 2px 10px 7px #F63; } .shdow2{
       box-shadow: -2px 0 0 green,0 -2px 0 blue,0 2px 0 red,2px 0 0 yellow;/*  Left , On , Next , Right  */ } .shdow3{
       box-shadow: 0 0 0 3px red; } </style>
    <title>Document</title>
</head>
<body>
    <div class="shdow1"> Border shadow effect </div>
    <div class="shdow2"> Border shadow effect </div>
    <div class="shdow3"> Border shadow effect </div>
</body>
</html>

Insert picture description here
In addition to adding shadows to the border , You can also give other elements ( Such as images ) Add shadow .
demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> .imgshadow{
       width: 250px; height: 150px; margin: 20px; box-shadow: 3px 3px 12px 5px #9400D3; } </style>
    <title>Document</title>
</head>
<body>
    <div class="imgshadow">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.-c5xdFYoT1Oblh9DzhqyXAHaEK?pid=ImgDet&rs=1" alt="" width="250px" height="150px">
    </div>
</body>
</html>

Insert picture description here
② Draw the outline
outline attribute ( outline ) Is a line drawn around an element , At the edge of the border , Can play the role of highlighting elements .

{
    outline:<color> <style> <width> <offset> inherit}
Parameters meaning
color Specify outline border color
style Specify the outline of the outline border
width Specify the outline border width
offset Specify a numeric value for the offset position of the outline border
inherit Default

Ⅰoutline-width attribute : Used to set the width of the whole outline of the element , Only when the outline style is not none when , This width will work .

{
    outline-width:thin/medium/thick/<length>}
Parameters meaning
thin Define the fine outline
thick Define rough outline
medium Default Define medium contour
<length> Defines the value of the outline thickness

Ⅱoutline-style attribute : This attribute is used to set the style of the entire outline of an element .

{
    outline-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset}
Parameters meaning
none The default value is Define no contour
dotted Define a dotted outline
dashed Define a dashed outline
solid Define a solid outline
double Define a double line profile The width of the double line is equal to outline-width Value
groove Define a 3D Groove profile The effect depends on outline-color Value
ridge Define a 3D Convex groove outline The effect depends on outline-color Value
inset Define a 3D Concave edge outline The effect depends on outline-color Value
outset Define a 3D Convex outline The effect depends on outline-color Value

Ⅲoutline-offset attribute : This attribute allows the contour to deviate from the edge of the container The distance between the outer frame and the edge of the container can be adjusted .

{
    outline-offset:<length> inherit}
Parameter values meaning
<length> Defines the value of the contour distance container
inherit Default inheritance

Ⅳoutline-color attribute : This attribute sets the color of the visible part of the entire outline of an element . Note that the style of the outline cannot be none, Otherwise the outline will not appear .
demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> p{
       border: red solid thin; outline: #00ff00 dotted thick; width: 300px; } div{
       outline: #ff6600 double 3px; /* color style width */ outline-offset: 5px; width: 300px; } </style>
    <title>Document</title>
</head>
<body>
    <p> Dot shaped rough outline </p>
    <div> Double line outline </div>
</body>
</html>

Insert picture description here
③nav Start attribute
When the user does not use the mouse , But when the web page is operated through the keyboard , Generally, operate from the top of the page to the activation focus . Of course, users can also use CSS To set the sequence number of the element focus .
Ⅰnav-index attribute : This attribute specifies the serial number for the current element to navigate in the current document . The sequence number of the navigation specifies the order in which the elements in the page get the focus through keyboard operation . This attribute can exist in nested pages .

{
    nav-index:auto <number> inherit}
Parameters meaning
auto Default order
<number> It has to be positive This number specifies the navigation order of the elements namely 1 To be navigated first
When several values are the same Navigate in document order
inherit Default inheritance

Be careful : To enable the user to obtain the focus in order , Page elements The following rules need to be followed .

  • This element supports nav-index attribute , Elements that are assigned a positive integer attribute value will be navigated first .
  • Have the same nav-index Elements of attribute values will be navigated in the order they appear in the character stream .
  • For those who do not support nav-index Property or nav-index The property value is auto The elements of , Will navigate in the order they appear in the character stream .
  • For those disabled elements , Will not participate in navigation sorting .
  • The shortcuts that users actually use to start navigation and activate page elements depend on the user's settings , Such as Tab The keys are used to navigate in sequence , and Enter The key is used to activate the selected element .
  • Users can also define shortcut keys for reverse order navigation . When passed Tab Key to navigate to the end of the sequence ( Start ) when , It may cycle to the beginning of the navigation sequence ( end ). Press Shift+Tab Key combinations are often used for reverse sequence navigation .

Ⅱnav-up、nav-right、nav-down and nav-left attribute
The four attributes are the default values of the input device 4 Direction keys , Press HTML Document order to control the focus switching of elements , But for a better user experience , It provides the control sequence direction of user-defined switching focus . among nav-up It means that ;nav-right It means right ;nav-down It means next ;nav-left It means left .

{
    nav-up:auto <id> [current root <target-name>]? inherit}
{
    nav-right:auto <id> [current root <target-name>]? inherit}
{
    nav-down:auto <id> [current root <target-name>]? inherit}
{
    nav-left:auto <id> [current root <target-name>]? inherit}
Parameters meaning
autoUserAgent Default order
<id> To switch elements id name
root|<target-name> Parameter cannot be _ name , Pointed out that frameset There are element focus switches between the target pages . If the specified target page exists , Is regarded as the focus of the current page , This means that you are completely dependent on the framework page . This attribute is based on the key node "root" Mark , Will put the whole frameset Frame page as target .
inherit Default inheritance

3、 Set column effect
stay CSS3 in , You can use the column layout property to arrange the contents by a specified number of columns , This layout method is suitable for pure document typesetting design , Flexible use of column effect can display text and pictures in multiple columns , Not only is it readable , It also saves a lot of web space .
① Set up multi column layout : publication 、 In the newspaper , You will see the effect of dividing the text content into several columns .columns Property can define the number of columns and the width of each column at the same time .

{
    columns: Width   Number of columns }

among , The width represents the width of each column , The number of columns represents the number of columns to be separated .
② Set multi column style : Use column Property to set the multi column effect , You can also use the corresponding properties to set the column width of multiple columns 、 Number of columns 、 Column spacing, split line style and other multi column styles .
Ⅰ Set column width : Except that it can be directly in column Property to define the column width , Can also be used column-width Property to define the column width .

{
    column-width:<length>/auto}

among ,<length> The attribute value represents the length value , Cannot be negative ; and auto The attribute value is the default value , Indicates that the width is automatically set according to the browser .
Ⅱ Set number of columns : Except that it can be directly in column Property to define the number of columns , Can also be used column-count Property to define the number of columns .

{
    column-count:<length>/auto}

among ,<length> Attribute values represent column values , Cannot be negative ; and auto The attribute value is the default value , Indicates that the number of columns is automatically set according to the browser .
Ⅲ Set column spacing : Users can use column-gap Property to define column spacing .

{
    column-gap:normal/<length>}

among ,<length> The attribute value represents the length value , Cannot be negative ; and normal The attribute value is the default attribute value , It's usually 1em.
Ⅳ Set split line style : Users can use column-rule Property to define the split line style .

{
    column-rule:<length>/<style>/<color>/<transparent>}
Parameters meaning
<length> Represents a column border
<style> Represents the split line style
<color> Indicates the color of the split line
<transparent> Represents the transparent style of the divider

thus CSS3 Derived column-rule-color、column-rule-width、column-rule-style Three attributes .
Ⅴ Set the title to display across columns : Users can use columns-span The title in the attribute definition column page is displayed across columns .

{
    column-span:1/all}

among ,1 The attribute value is the default value , Indicates that only... Is displayed in this column ; and all Attribute values represent cross column display .
Ⅵ Set column height : Users can use column-fill Property to define column height .

{
    column-fill:auto/balance}

among ,auto The attribute value indicates that the column height changes with the content ,balance The attribute value indicates that the column height is set uniformly according to the height of the column with the most content .
demonstration :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> .pss{
       text-indent: 10mm; column-width: auto;/*  Line width is free  */ column-count: 3;/*  Set number of columns  */ column-gap: 2em;/*  Column spacing 2em */ column-rule: 1px dashed black; } h2,h3{
       text-align: center; column-span: all; } </style>
    <title>Document</title>
</head>
<body>
    <h2>2018 Jiangsu college entrance examination model essay </h2>
    <h3> anonymous </h3>
    <div class="pss">
    <p> 
         Western linguists believe that , We are in a world constructed by language , Some are presented through sound and image , Some are solidified and preserved with the help of many connotative symbols . There is no language , There will be no progress of human civilization , Away from the construction and understanding of language , The light of wisdom in society will also fade . if “ Life is full of language ”, It's not too much .
    </p>
    <p>
         The carrier and presentation of these languages are different . for example , A historical relic is a language . Take a walk in the Yuanmingyuan Ruins Park , We can see through the ruins , To see the suffering years of that broken country , From these historical traces, we can also imagine the courage and passion of countless people with lofty ideals who were desperate to create a new country . The language is long and profound , They don't need external forces , There is no need for too much flashy carving , Can always be engraved in people's hearts . This can be called “ The language of history ”.
    </p>
    <p>
         Of course , Some history is far away from us , Some are recent history . When we walked beside the ruins of Wenchuan Earthquake , I can still feel the shock pain ten years ago , But these pains also make us reflect , Let us firmly believe that the power of unity can overcome everything , This belief was passed on to future generations through the silent language of these sites , They are sound waves that never die .
    </p>
    <p>
         When archaeologists found traces of civilization in the pre Qin ruins , Whether to use C-14 Technology measures its age , Or the ancient DNA, these “ Find out ” In fact, the process is an opportunity to have a dialogue with ancient civilizations . They tell future generations , Civilization has never marched in an idyllic way , There are too many disputes and struggles , There are too many sorrows and regrets , But anyway , Civilization endures , To this day , This is the most proud thing for future generations .
    </p>
    <p>
         Compared to the language of historical sites “ Sense of silence ”, There are many languages in life that are more flexible and lively , They also constitute the most beautiful notes in the world . such as , The lingering words between lovers who indulge in the sea of love , The words of discussion of young students who are in heated debate about knowledge in the classroom , The teachers' words of instruction to the children ....... All these give us a more colorful life , Let us keep forging ahead in the torrent of emotion and thought , Draw infinite positive energy from it .
    </p>
    <p>
         The present language world , Indeed, it seems more abundant and diversified . however , It also has very complicated situations , because , How the narrator tells the object , The paradigm of language expression , It also determines its final appearance . In some grand narratives , Language often presents itself as a discourse paradigm , Modifying discourse means the change of discourse power behind it . such as , How the media reports a news , Or choose a positive story , Or hype the negative news points in order to attract attention , The impact is completely different .
    </p>
    <p>
         A lot of times , We should avoid narrow ideas or knowledge limitations , The negative influence on the way of language presentation , This may be an important way to make the language world better . All in all , Through the historical and current language world , We can understand the charm of all things , To discover the diversity of the world , It was really a wonderful experience .
    </p>
    </div>
</body>
</html>

Insert picture description here

原网站

版权声明
本文为[Wayne830]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202170528129786.html

边栏推荐

猜你喜欢

随机推荐